<!DOCTYPE html>
<html>
<head>
<title>第四阶段总结.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
 html{
    padding: 0 100px;
}
body {
	font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
	font-size: var(--vscode-markdown-font-size, 14px);
	padding: 0 26px;
	line-height: var(--vscode-markdown-line-height, 22px);
	word-wrap: break-word;
}

#code-csp-warning {
	position: fixed;
	top: 0;
	right: 0;
	color: white;
	margin: 16px;
	text-align: center;
	font-size: 12px;
	font-family: sans-serif;
	background-color:#444444;
	cursor: pointer;
	padding: 6px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}

#code-csp-warning:hover {
	text-decoration: none;
	background-color:#007acc;
	box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}

body.scrollBeyondLastLine {
	margin-bottom: calc(100vh - 22px);
}

body.showEditorSelection .code-line {
	position: relative;
}

body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -12px;
	height: 100%;
}

body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
	left: -30px;
}

.vscode-light.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.vscode-light.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(0, 0, 0, 0.40);
}

.vscode-light.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

.vscode-dark.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.vscode-dark.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 255, 255, 0.60);
}

.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

.vscode-high-contrast.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(255, 160, 0, 0.7);
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 160, 0, 1);
}

.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

img {
	max-width: 100%;
	max-height: 100%;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
}

hr {
	border: 0;
	height: 2px;
	border-bottom: 2px solid;
}

h1 {
	padding-bottom: 0.3em;
	line-height: 1.2;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

h1, h2, h3 {
	font-weight: normal;
}

table {
	border-collapse: collapse;
}

table > thead > tr > th {
	text-align: left;
	border-bottom: 1px solid;
}

table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
	padding: 5px 10px;
}

table > tbody > tr + tr > td {
	border-top: 1px solid;
}

blockquote {
	margin: 0 7px 0 5px;
	padding: 0 16px 0 10px;
	border-left-width: 5px;
	border-left-style: solid;
}

code {
	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
	font-size: 1em;
	line-height: 1.357em;
}

body.wordWrap pre {
	white-space: pre-wrap;
}

pre:not(.hljs),
pre.hljs code > div {
	padding: 16px;
	border-radius: 3px;
	overflow: auto;
}

pre code {
	color: var(--vscode-editor-foreground);
	tab-size: 4;
}

/** Theming */

.vscode-light pre {
	background-color: rgba(220, 220, 220, 0.4);
}

.vscode-dark pre {
	background-color: rgba(10, 10, 10, 0.4);
}

.vscode-high-contrast pre {
	background-color: rgb(0, 0, 0);
}

.vscode-high-contrast h1 {
	border-color: rgb(0, 0, 0);
}

.vscode-light table > thead > tr > th {
	border-color: rgba(0, 0, 0, 0.69);
}

.vscode-dark table > thead > tr > th {
	border-color: rgba(255, 255, 255, 0.69);
}

.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
	border-color: rgba(0, 0, 0, 0.18);
}

.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
	border-color: rgba(255, 255, 255, 0.18);
}

</style>

<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */

/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
	color: #8e908c;
}

/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
	color: #c82829;
}

/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
	color: #f5871f;
}

/* Tomorrow Yellow */
.hljs-attribute {
	color: #eab700;
}

/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
	color: #718c00;
}

/* Tomorrow Blue */
.hljs-title,
.hljs-section {
	color: #4271ae;
}

/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
	color: #8959a8;
}

.hljs {
	display: block;
	overflow-x: auto;
	color: #4d4d4c;
	padding: 0.5em;
}

.hljs-emphasis {
	font-style: italic;
}

.hljs-strong {
	font-weight: bold;
}
</style>

<style>
/*
 * Markdown PDF CSS
 */

 body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
	padding: 0 12px;
}

pre {
	background-color: #f8f8f8;
	border: 1px solid #cccccc;
	border-radius: 3px;
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

pre:not(.hljs) {
	padding: 23px;
	line-height: 19px;
}

blockquote {
	background: rgba(127, 127, 127, 0.1);
	border-color: rgba(0, 122, 204, 0.5);
}

.emoji {
	height: 1.4em;
}

code {
	font-size: 14px;
	line-height: 19px;
}

/* for inline code */
:not(pre):not(.hljs) > code {
	color: #C9AE75; /* Change the old color so it seems less like an error */
	font-size: inherit;
}

/* Page Break : use <div class="page"/> to insert page break
-------------------------------------------------------- */
.page {
	page-break-after: always;
}

</style>

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
  <script>
    mermaid.initialize({
      startOnLoad: true,
      theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
          ? 'dark'
          : 'default'
    });
  </script>
<h1 id="%E7%AC%AC%E4%B8%80%E5%A4%A9">第一天</h1>
<h2 id="1-vue%E7%9A%84%E6%A1%86%E6%9E%B6">1 Vue的框架</h2>
<h3 id="11-vue%E7%9A%84%E6%A6%82%E5%BF%B5">1.1 Vue的概念</h3>
<ul>
<li>渐进式的框架：</li>
</ul>
<pre class="hljs"><code><div>    自底向上，逐渐增强。本身Vue就可以当做一个库区使用(比如jq)，可以实现一个小demo
    当我们的产品需求增加的时候，要完成一个比较复杂的项目(小U商城)，我们可以利用vue的脚手架快速的搭建项目(执行脚手架命令快速搭建基本骨架)。
    页面多的时候，我们就会用到vue的告诫方法比如路由，状态管理，http库

    官网理解：
    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

</div></code></pre>
<h3 id="12-vue%E7%9A%84%E7%89%B9%E7%82%B9">1.2 Vue的特点</h3>
<ol>
<li>易用</li>
<li>灵活</li>
<li>高校</li>
</ol>
<h3 id="13-vue%E7%9A%84%E5%AE%89%E8%A3%85">1.3 Vue的安装</h3>
<ol>
<li>通过CDN引入 (这种方式不推荐)</li>
</ol>
<ul>
<li>练习是没问题的</li>
</ul>
<pre class="hljs"><code><div>    开发环境：(包含一些提示和错误警告，练习时建议引入这个版本)
    https://cdn.jsdelivr.net/npm/vue/dist/vue.js

    生产环境：(去掉了一些提示和警告)
    https://cdn.jsdelivr.net/npm/vue@2.6.12
</div></code></pre>
<ol start="2">
<li>
<p>把核心库文件下载本地引入(以前经常使用)</p>
</li>
<li>
<p>通过npm管理去下载</p>
</li>
</ol>
<pre class="hljs"><code><div>    1 查看是否存在package.json文件
        如果存在直接下载，不存在创建它
    2. 创建package.json
        npm init (自定义配置)
        npm init -y (默认初始化)
    3. 下载相关依赖

    Vue下载命令
    npm install vue
    版本号: + vue@2.6.12
</div></code></pre>
<h3 id="14-%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%92%8C%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83">1.4 开发环境和生产环境</h3>
<pre class="hljs"><code><div>    开发环境指的是未上线版本内部调试，社会人员无法访问

    生产环境直的是上线版本(一般利用)

</div></code></pre>
<h3 id="15-%E5%9F%BA%E6%9C%AC%E5%BA%94%E7%94%A8">1.5 基本应用</h3>
<pre class="hljs"><code><div>    <span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span> /&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span> /&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>初识vue<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 第一步引入核心库 
        引入的是开发环境，因为包含错误提示和警告 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 第二步 创建一个容器，用来承载vue所有语法 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box"</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 利用{{}} 双华括号，插值表达式 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 属于html语法，原样输出 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- 第三步逻辑交互 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">new</span> Vue(), <span class="hljs-string">"核心库"</span>);
        <span class="hljs-comment">//实例化 VUE的核心库 得到一个大的配置对象</span>
        <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({
            <span class="hljs-attr">el</span>: <span class="hljs-string">"#box"</span>, <span class="hljs-comment">//元素，挂载点</span>
            <span class="hljs-attr">data</span>: {
            <span class="hljs-comment">//vue的属性，变量,声明式，不需要你var或者let</span>
            <span class="hljs-attr">msg</span>: <span class="hljs-string">"今天你核酸了吗？？？"</span>,
            },
        });
        <span class="hljs-built_in">console</span>.log(vm, <span class="hljs-string">"核心库1111"</span>);
        <span class="hljs-built_in">console</span>.log(vm.msg, <span class="hljs-string">"定义的变量"</span>);
        <span class="hljs-built_in">console</span>.log(vm.$el, <span class="hljs-string">"挂载的DOM"</span>);
        </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>

</div></code></pre>
<h3 id="16-el%E5%85%83%E7%B4%A0">1.6 el元素</h3>
<ul>
<li>不能以html和boby作为挂载点。也不能用class，因为它不是唯一。我们要用id
每一个vue实例都是独立的，一定要先定义后使用</li>
<li>Do not mount Vue to <html> or <body> - mount to normal elements instead.不要把元素挂载到html或者body上。要挂载到正常元素上</li>
</ul>
<h3 id="17-%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F">1.7 插值表达式</h3>
<ul>
<li>不能写复杂语法，可以用三元运算符</li>
</ul>
<h3 id="18-%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4">1.8 基本指令</h3>
<pre class="hljs"><code><div>    v-html
    用来解析html标签语法
    扩展：发表文章到文章详情渲染的流程，富文本编辑器。

    v-text
    解析文本

    v-bind  动态绑定
    可以简写成 : (冒号)

    v-if 和 v-show
    v-if和v-show 条件判断

    经典面试题：v-if 和 v-show 的区别？
    相同点：v-if和v-show都可以控制显示隐藏
    不同点: v-if属于惰性加载，它是false的时候，删除了dom节点。而v-show是false的时候，只是在标签中添加了一个样式：display:none
    使用场景：频繁操作dom节点显示隐藏，我们用v-show。页面一加载判断有没有这个节点的场景用v-if

    v-on 
    ① 事件触发，执行方法名，可以加小括号，也可以省略
    ② v-on: 感觉很麻烦，我们可以简写成 @
    ③ 方法体中逻辑代码只有一句，可以省略整个方法
    事件的传参：
    一、传递参数
        如果传递参数，肯定要有小括号
    二、传递事件源 event
        小括号可有可无
        如果有小括号，我们称之为，显示传参
        如果没有小括号，我们称之为，隐式传参
        有小括号 传递事件源，显示传参,要传递 $event

    v-for  循环遍历
    v-for=&quot;(item.index) in/of 要循环的变量&quot;
    利用 in/of的方法
    数组： 
        它有两个参数，都是自定义，第一个参数是数组中的每一项，一般用item 。第二个参数是索引，一般用index
    对象：
        它有三个参数，都是自定义
        第一个参数：对象中的value 
        第二个参数： 对象中的key
        第三个参数： 索引

    v-model 双向数据绑定
    v-model 是表单元素的指定。双向数据绑定。数据影响了视图，同样视图变化也会影响数据

    MVVM设计模式
    M model 模型
    v view 视图
    vm viewModel 视图模型，它是模型和视图中的桥梁

    MVC设计模式 （大部分都是后端框架的设计模式，前端中只有angular1.x 版本是这个模式）
    M model 模型
    V  view 视图
    c controlor 控制器

</div></code></pre>
<h2 id="2-%E9%9D%A2%E8%AF%95%E9%A2%98">2 面试题</h2>
<h3 id="%E5%AF%B9%E4%BA%8Evue%E6%98%AF%E4%B8%80%E5%A5%97%E6%B8%90%E8%BF%9B%E5%BC%8F%E6%A1%86%E6%9E%B6%E7%9A%84%E7%90%86%E8%A7%A3">对于Vue是一套渐进式框架的理解</h3>
<ul>
<li>渐进式代表的含义是：主张最少。</li>
<li>Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用MVVM和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。</li>
</ul>
<h3 id="%E8%AF%B7%E5%88%97%E5%87%BA%E8%87%B3%E5%B0%914%E4%B8%AAvue%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4%E5%B9%B6%E7%AE%80%E8%A6%81%E8%AF%B4%E6%98%8E%E5%85%B6%E4%BD%9C%E7%94%A8"><strong>请列出至少4个vue基本指令，并简要说明其作用。</strong></h3>
<pre class="hljs"><code><div>    v-model 多用于表单元素实现双向数据绑定
    v-for 格式： v-for=&quot;字段名 in(of) 数组json&quot;  循环数组或json,需要注意从vue2开始取消了$index
    v-show 显示内容 
    v-if    显示与隐藏  
    v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误
    v-bind  动态绑定  作用： 及时对页面的数据进行更改,可以简写成:
    v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数  函数必须写在methods里面
    v-text  解析文本
    v-html   解析html标签
</div></code></pre>
<h3 id="v-show-%E4%B8%8E-v-if-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB">v-show 与 v-if 有什么区别？</h3>
<ul>
<li>v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。</li>
<li>v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。</li>
<li>v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景</li>
</ul>
<h1 id="%E7%AC%AC%E4%BA%8C%E5%A4%A9">第二天</h1>
<h2 id="1-%E7%A6%BB%E7%BA%BF%E5%AD%98%E5%82%A8">1 离线存储</h2>
<h3 id="11-%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8localstorage%E4%BC%9A%E8%AF%9D%E5%AD%98%E5%82%A8sessionstorage">1.1 本地存储（localStorage）会话存储（sessionStorage）</h3>
<pre class="hljs"><code><div>    关于离线存储，我们会引发出两道比较经典面试题？
    一、localStorage和sessionStorage以及cookie的区别
    二、localStorage和sessionStorage的区别
    三、谁可以实现跨页面存储？？？
    localStorage可以实现跨页面存储

    相同点：
        它们的大小都是5MB左右。
        它们的存储形式都是字符串的形式
        它们的语法都相同。
        添加存储 localStorage/sessionStorage.setItem('key','value')
        获取存储 localStorage/sessionStorage.getItem('key')
        移除存储 localStorage/sessionStorage.removeItem('key')
        清空所有存储不要用！！！
    不同点：
        localStorage它时本地存储也叫永久性存储。只要不手动删除，它永远存储。
        sessionStorage是会话存储，关闭当前页面即消失
    使用场景：
        购物车（用的相对多），登录（记住密码）

</div></code></pre>
<h2 id="2-%E5%8A%A8%E6%80%81%E6%A0%B7%E5%BC%8F">2 动态样式</h2>
<h3 id="21-%E5%8A%A8%E6%80%81class%E7%AC%AC%E4%B8%80%E7%A7%8D%E6%96%B9%E5%BC%8F-%E5%8F%98%E9%87%8F">2.1 动态class第一种方式 变量</h3>
<pre class="hljs"><code><div>    视图
    &lt;div :class='变量名'&gt;&lt;/div&gt;

    逻辑
    data:{
        变量名:&quot;存在的类名&quot;
    }


</div></code></pre>
<h3 id="22-%E5%8A%A8%E6%80%81class%E7%AC%AC%E4%BA%8C%E7%A7%8D%E6%96%B9%E5%BC%8F-%E6%95%B0%E7%BB%84">2.2 动态class第二种方式 数组</h3>
<pre class="hljs"><code><div>    视图
    &lt;div :class=&quot;[条件?'类名A':'类名B']&quot;&gt;&lt;/div&gt;

</div></code></pre>
<h3 id="23-%E5%8A%A8%E6%80%81class%E7%9A%84%E7%AC%AC%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F-%E5%AF%B9%E8%B1%A1">2.3 动态class的第三种方式 对象</h3>
<pre class="hljs"><code><div>    视图
    &lt;div :class=&quot;{'类名A':条件A,'类名B':条件B,'类名C':条件C,...}&quot;&gt;&lt;/div&gt;

</div></code></pre>
<h2 id="2-%E5%8A%A8%E6%80%81%E6%A0%B7%E5%BC%8F%E4%B9%8Bstyle">2 动态样式之style</h2>
<ul>
<li>很少使用</li>
</ul>
<pre class="hljs"><code><div>    视图
    &lt;div :style=&quot;变量名&quot;&gt;&lt;/div&gt;

    //逻辑
    data:{
        变量名:{
        &quot;font-size&quot;:&quot;XXpx&quot;,
        color:&quot;red&quot;,
        backgroundColor:'green'
        }
    }
</div></code></pre>
<h2 id="3-%E4%BF%AE%E9%A5%B0%E7%AC%A6">3 修饰符</h2>
<ul>
<li>学习事件的流程=&gt;如何定义事件=&gt;事件的传参=&gt;事件传递数据=&gt;阻止默认事件和冒泡事件以及捕获。。。=&gt;不同框架不同用法</li>
</ul>
<h3 id="31-%E5%B8%B8%E7%94%A8%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6">3.1 常用事件修饰符</h3>
<pre class="hljs"><code><div>    .prevent 阻止默认事件
    .stop 阻止冒泡事件
    .capture 事件捕获
    .self 触发自己
    .once 只触发一次

    修饰符方法可以连续使用 
    .stop.once
</div></code></pre>
<h3 id="32-%E5%B8%B8%E7%94%A8%E7%9A%84%E9%94%AE%E7%9B%98%E4%BF%AE%E9%A5%B0%E7%AC%A6">3.2 常用的键盘修饰符</h3>
<pre class="hljs"><code><div>    键盘修饰符 修饰键盘事件
    常用的键盘修饰符
    回车 .enter .13
    空格 .space .32
    左键 .left .37
    右键 .right .39
    上键 .up .38
    下键 .down .40

</div></code></pre>
<h3 id="33-%E5%B8%B8%E7%94%A8%E7%9A%84%E8%A1%A8%E5%8D%95%E4%BF%AE%E9%A5%B0%E7%AC%A6">3.3 常用的表单修饰符</h3>
<pre class="hljs"><code><div>    常用的表单修饰符，它相对来说比较鸡肋
    专门用于修饰v-model
    .lazy 懒加载(当失去焦点的时候，渲染input值)
    .number 只能输入数值（以数值开头，只显示数值。如果以非数值开头不起作用）
    .trim  去掉首尾空格

</div></code></pre>
<h2 id="4-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F">4 生命周期</h2>
<ul>
<li>软件本身有生命周期，从创建到销毁的一个过程。</li>
<li>vue中的声明周期是从实例的创建到销毁。在这个过程中，触发了很多自带的函数，这些函数我们称之为生命周期</li>
</ul>
<h3 id="41-vue%E6%95%B4%E4%B8%AA%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%90%AB%E6%9C%89%E5%93%AA%E4%BA%9B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0">4.1 vue整个生命周期过程中含有哪些生命周期函数</h3>
<ul>
<li>beforeCreate(){} 创建之前</li>
<li>created() 创建完成</li>
<li>beforeMount(){} 挂载之前</li>
<li>mounted(){} 挂载</li>
<li>beforeUpdate(){} 更新之前</li>
<li>updated(){} 更新</li>
<li>beforeDestroy(){} 销毁之前</li>
<li>detroyed(){} 销毁</li>
</ul>
<h3 id="42-%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E8%BF%87%E7%A8%8B%E4%B8%AD%E8%A7%A6%E5%8F%91%E4%BA%86%E5%93%AA%E4%BA%9B%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0">4.2 页面加载过程中触发了哪些钩子函数（生命周期函数）</h3>
<pre class="hljs"><code><div>    触发了前四个生命周期函数
    * beforeCreate(){} 创建之前
    * created() 创建完成
    * beforeMount(){} 挂载之前
    * mounted(){} 挂载

</div></code></pre>
<h3 id="43-%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA">4.3 如何理解生命周期图示</h3>
<pre class="hljs"><code><div>    初始化创建实例，只有一些事件和生命周期函数出现
    当生命周期走到创建之前的时候，这个时候没有el元素，没有data数据
    当生命周期函数执行到创建完成的时候，这个时候出现data数据，依然没有el元素
    当生命周期执行到挂载之前的时候，首先判断是否含有el元素，如果有生命周期继续执行。如果没有，判断是否调用了$mount()这个函数方法，如果有有生命周期继续执行，如果也没有，生命周期戛然而止。含有el元素之后，我们要判断是否含有tempalte这个属性，如果有，优先渲染tempalte内容，如果没有我们渲染外部的html（你创建的容器），由此得知tempalte属性&gt;outerHTML
    这个时候出现了el元素，但是数据并没有渲染还是假的结构
    当生命周期执行到挂载的时候，数据渲染到视图上
    当数据发生变化的时候会触发更新之前，dom结构重新渲染并触发更新
    当我们手动调用销毁方法的时候，销毁之前和销毁两个生命周期函数才会被执行。如果没有执行销毁，一些底层事件，监听器，组件，依然存在

</div></code></pre>
<h3 id="44-%E5%B8%B8%E7%94%A8%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0%E6%9C%89%E5%93%AA%E4%BA%9B">4.4 常用的生命周期函数有哪些</h3>
<pre class="hljs"><code><div>    created(){
    //在这个生命周期函数 调用ajax（一些网友）
    }

    mountd(){
    //这里有DOM 节点
    //调取ajax，执行异步操作，执行周期性函数，倒计时等等。。。
    }

    update(){}


</div></code></pre>
<h2 id="%E9%9D%A2%E8%AF%95%E9%A2%98">面试题</h2>
<h3 id="vue%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B9%B6%E7%AE%80%E8%A6%81%E8%AF%B4%E6%98%8E%E5%AE%83%E4%BB%AC%E7%9A%84%E4%BD%9C%E7%94%A8">Vue中常用的修饰符有哪些？并简要说明它们的作用。</h3>
<ul>
<li>Stop：阻止冒泡；</li>
<li>prevent：阻止默认事件；</li>
<li>once：只执行一次；</li>
<li>capture：将事件流设为捕获方式；</li>
<li>self：直对自身触发事件；</li>
<li>enter：回车键；Up:上； down：下；left:左；right：右；</li>
</ul>
<h3 id="vue%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8%E9%97%AE%E9%A2%98">vue初始化页面闪动问题</h3>
<ul>
<li>使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。</li>
</ul>
<pre class="hljs"><code><div>    css里加上
    [v-cloak] {
        display: none;
    }

    如果没有彻底解决问题，则在根元素加上style=&quot;display: none;&quot; :style=&quot;{display: 'block'}&quot;
</div></code></pre>
<h3 id="%E8%B0%88%E8%B0%88%E4%BD%A0%E5%AF%B9-vue-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%9A%84%E7%90%86%E8%A7%A3">谈谈你对 Vue 生命周期的理解？</h3>
<pre class="hljs"><code><div>    （1）生命周期是什么？
    Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -&gt; 渲染、更新 -&gt; 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

    （2）各个生命周期的作用
    生命周期的描述 
    beforeCreate 组件实例被创建之初，组件的属性生效之前 
    created 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用 
    beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用 mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前 
    update 组件数据更新之后 
    beforeDestory 组件销毁前调用 
    destoryed 组件销毁后调用

</div></code></pre>
<h3 id="%E5%9C%A8%E5%93%AA%E4%B8%AA%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%86%85%E8%B0%83%E7%94%A8%E5%BC%82%E6%AD%A5%E8%AF%B7%E6%B1%82">在哪个生命周期内调用异步请求？</h3>
<ul>
<li>可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。（本人常放置到mounted中可以操作dom,当然也可以放到created中）</li>
</ul>
<h1 id="%E7%AC%AC%E4%B8%89%E5%A4%A9">第三天</h1>
<h2 id="1-watch%E7%9B%91%E5%90%AC%E4%BE%A6%E5%90%AC%E5%99%A8">1 watch（监听，侦听器）</h2>
<ul>
<li>它本身和data一样都属于vue实例的配置项</li>
<li>作用：用来实时监控数据的变化</li>
</ul>
<h3 id="11-%E6%B5%85%E7%9B%91%E5%90%AC">1.1 浅监听</h3>
<ul>
<li>浅监听，只能监听字符串，数值和简单数组的变化</li>
</ul>
<pre class="hljs"><code><div>    data:{
        数据属性:''
    }
    watch:{
        数据属性(新值,上一次的值){
            
        }
    }

</div></code></pre>
<h3 id="12-%E6%B7%B1%E5%BA%A6%E7%9B%91%E5%90%AC">1.2 深度监听</h3>
<ul>
<li>深度监听可以监听复杂数据以及对象数据的变化</li>
</ul>
<pre class="hljs"><code><div>    data:{
        obj(对象):{}
    }
    watch:{
        obj(对象):{
            deep:true,
            handler(新值){
            
            }
        }
    }

</div></code></pre>
<h2 id="2-computed%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7">2 computed(计算属性)</h2>
<ul>
<li>作者，不想要在{{}}这个模板写大量的复杂数据计算，它希望这个模板是简洁高效的。
那么大量的复杂数据的计算，我们可以放置在单门的属性中，这个属性，我们称之为计算属性。
计算属性的本质就是一个函数，最终的结果必须通过return返回出来</li>
</ul>
<h3 id="21-%E7%94%A8%E6%B3%95">2.1 用法</h3>
<pre class="hljs"><code><div>    computed:{
        属性名(){
            return 值
        }
    }

</div></code></pre>
<h3 id="22-computed%E5%92%8Cmethods%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB">2.2 computed和methods有什么区别</h3>
<pre class="hljs"><code><div>    计算属性和methods的区别？

    相同点：都是根据依赖返回回出相应的内容，当依赖发生变化的时候，结果值都跟着变化
    不同点： 计算属性具有缓存的特性，无论执行多少次，只要依赖没有发生变化，永远是上一次的结果。methods方式是调用多少次就执行多少次

    使用场景： 如果有交互逻辑我们选择使用methods方法。如果有大量的逻辑计算，且这个结果被多次调用，就选择用计算属性

</div></code></pre>
<h3 id="23-computed%E5%92%8Cwatch%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB">2.3 computed和watch有什么区别</h3>
<pre class="hljs"><code><div>    相同点：都是以数据追踪为机制，当数据依赖发生变化，内置的函数就被调用，比如watch封装监听函数和计算属性封装的函数
    不同点：
    watch属于 一对多，一个数据会影响N条数据
    computed 属于多对一，多个属性最终影响一个结果
    使用场景： 
    watch,当有大量的异步操作或者内容开销比较大的时候，选择它
    computed，当有大量逻辑计算并且只需要最后一个结果的时候，选择它

</div></code></pre>
<h3 id="24-%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E4%B8%AD%E7%9A%84getter%E5%92%8Csetter">2.4 计算属性中的getter和setter</h3>
<ul>
<li>每一个对象都是自己的get() set()方法</li>
</ul>
<pre class="hljs"><code><div>    computed:{
        <span class="hljs-attr">allPrice</span>:{
            <span class="hljs-keyword">get</span>(){
                <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.x*<span class="hljs-keyword">this</span>.y
            },
            <span class="hljs-keyword">set</span>(val){
                <span class="hljs-comment">//set 赋值器什么时候被触发？外部给allPrice 赋值的时候会触发这个函数 val只是一个普通的形参你可以随意设定名称请语义化\</span>
                <span class="hljs-comment">//如果外部直接影响当前计算属性名，会先执行set(){} 然后会影响get(){}</span>
                <span class="hljs-built_in">console</span>.log(val,<span class="hljs-string">'你是谁'</span>)
                <span class="hljs-keyword">this</span>.x = val
            }
        }
    }


    vm.allPrice = <span class="hljs-number">50</span>

</div></code></pre>
<h2 id="%E6%80%BB%E7%BB%93%E9%87%8D%E7%82%B9">总结重点</h2>
<h3 id="jsonp%E7%9A%84%E5%88%9B%E5%BB%BA%E5%8E%9F%E7%90%86">jsonp的创建原理</h3>
<pre class="hljs"><code><div>    一、创建一个标签 
    doucment.createElement('script')

    二、给这个标签创建一个属性
    doucment.createElement('script').src='你要调取的接口'

    三、把创建好的标签插入到body中
    document.appendChild(创建好的标签)

</div></code></pre>
<h3 id="v-if%E4%B8%8Ev-for-%E8%B0%81%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%9B%B4%E9%AB%98">v-if与v-for 谁的优先级更高</h3>
<ul>
<li>v-for的优先级更高.</li>
</ul>
<h2 id="%E9%9D%A2%E8%AF%95%E9%A2%98">面试题</h2>
<h3 id="%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%92%8Cmethods%E7%9A%84%E5%8C%BA%E5%88%AB">计算属性和methods的区别</h3>
<ul>
<li>两种方式得到的结果是相同的。</li>
<li>不同的是计算属性是基于变量的值进行缓存的，只要在它关联的变量值发生变化时计算属性就会重新执行。而methods没有缓存，所以每次访问都要重新执行。</li>
</ul>
<pre class="hljs"><code><div>    计算属性的特点：
    计算属性使数据处理结构清晰；
    依赖于数据，如果数据有更新，则计算属性的结果自动更新；
    计算属性的结果无须在data中定义就能够在页面中直接使用；
    相较于methods，如果依赖的数据不更新，则读取缓存，不会重新计算。
</div></code></pre>
<h3 id="%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%92%8Cwatch%E7%9A%84%E5%8C%BA%E5%88%AB">计算属性和watch的区别</h3>
<ul>
<li>共同点：都是以Vue的依赖追踪机制为基础的，都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。</li>
<li>不同点：watch擅长处理的场景：一个数据影响多个数据；computed擅长处理的场景：一个数据受多个数据影响。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。</li>
</ul>
<pre class="hljs"><code><div>    当在模板内使用了复杂逻辑的表达式时，应当使用计算属性。
    虽然方法也能实现同样的效果，但是因为计算属性可以基于它们的依赖进行缓存，所以选择计算属性会比方法更优。
    当需要在数据变化时执行异步或开销较大的操作时，可以使用 watch。

</div></code></pre>
<h3 id="vue%E4%B8%AD-key-%E5%80%BC%E7%9A%84%E4%BD%9C%E7%94%A8">vue中 key 值的作用？</h3>
<pre class="hljs"><code><div>    在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM
    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。
</div></code></pre>
<h3 id="vue%E4%B8%AD%E6%A3%80%E6%B5%8B%E4%B8%8D%E5%88%B0%E6%95%B0%E7%BB%84%E6%88%96%E8%80%85%E5%AF%B9%E8%B1%A1%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3">vue中检测不到数组或者对象发生改变，如何解决？</h3>
<pre class="hljs"><code><div>    (1)vm.arr.splice(index, 1, newValue)

    (2)vm.$set(vm.arr, index, newValue) 

    (3)Vue.set(vm.arr, index, newValue) 

</div></code></pre>
<h3 id="vue%E6%9B%B4%E6%96%B0%E6%95%B0%E7%BB%84%E6%97%B6%E8%A7%A6%E5%8F%91%E8%A7%86%E5%9B%BE%E6%9B%B4%E6%96%B0%E7%9A%84%E6%96%B9%E6%B3%95">vue更新数组时触发视图更新的方法</h3>
<pre class="hljs"><code><div>    push();
    pop();
    shift();
    unshift();
    splice();
    sort();
    reverse()
</div></code></pre>
<h1 id="%E7%AC%AC%E5%9B%9B%E5%A4%A9">第四天</h1>
<h2 id="2-filter%E8%BF%87%E6%BB%A4%E5%99%A8">2 filter(过滤器)</h2>
<h3 id="21-filter%E8%BF%87%E6%BB%A4%E5%99%A8">2.1 filter过滤器</h3>
<ul>
<li>用于文本格式化。过滤器中的符号，是“|” 过滤符</li>
</ul>
<pre class="hljs"><code><div>    后端（java或者php）返回给前端的数据，并不能直接应用或者渲染，我们需要对该数据进行转化。
    比如：时间。后端返给前端的时间格式是时间戳，1609981233167
    但是用户看到的格式： 2021-01-06 14:30 或者 2021/01/06 14:30。我们可以直接利用过滤器在模板中格式化
</div></code></pre>
<h3 id="22-%E5%B1%80%E9%83%A8%E8%BF%87%E6%BB%A4%E5%99%A8">2.2 局部过滤器</h3>
<pre class="hljs"><code><div>    filters:{
        //创建多个局部过滤器
        过滤器名称(要过滤的内容,调用该过滤器传入的参数){
            return //过滤结果
        }
    }

</div></code></pre>
<h3 id="23-%E5%85%A8%E5%B1%80%E8%BF%87%E6%BB%A4%E5%99%A8%E7%9A%84%E6%A1%88%E4%BE%8B%E5%BA%94%E7%94%A8">2.3 全局过滤器的案例应用</h3>
<ul>
<li>项目开发的过程中，这种方式用的比较多</li>
</ul>
<pre class="hljs"><code><div>    Vue.filter('过滤器名称',()=&gt;{
    //过滤器的逻辑
    })
</div></code></pre>
<h2 id="3-%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB">3  过渡动画</h2>
<h3 id="31-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF">3.1 使用场景</h3>
<ul>
<li>
<p>v-if或v-show切换</p>
</li>
<li>
<p>路由的切换</p>
</li>
</ul>
<h3 id="32-%E5%86%85%E7%BD%AE%E7%9A%84%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB">3.2 内置的过渡动画</h3>
<pre class="hljs"><code><div>    一离开 
    leave 离开之前
    leave-active 离开的过程中
    leave-to 离开后

    二进入
    enter 进入之前
    enter-active 进入的过程中
    enter-to 进入之后
</div></code></pre>
<h3 id="33-%E8%B0%83%E7%94%A8%E5%8A%A8%E7%94%BB%E5%BA%93">3.3 调用动画库</h3>
<ul>
<li>npm网站：https://www.npmjs.com/package/animate.css</li>
<li>官方网址：https://animate.style/</li>
</ul>
<h4 id="331-%E4%B8%8B%E8%BD%BD">3.3.1 下载</h4>
<ul>
<li>npm install(i) animate.css</li>
</ul>
<h3 id="33-%E5%8A%A8%E7%94%BB%E5%BA%93%E7%9A%84%E4%BD%BF%E7%94%A8">3.3 动画库的使用</h3>
<pre class="hljs"><code><div>    调用动画库的时候，就调用一种方式。比如：全部用进来。如果进来和离开同时使用，在切换中会显得很乱
</div></code></pre>
<h2 id="4-%E7%BB%84%E4%BB%B6">4 组件</h2>
<ul>
<li>组件就是复用一个vue实例，它包含了vue实例中所有的属性和方法，除了el元素，且data必须是一个函数</li>
<li>组件大到一大段代码块，小到一个标签，我们都可以认为它是一个组件</li>
<li>组件一定要先注册（components），然后调用渲染</li>
<li>每一个组件都是独立的</li>
</ul>
<h3 id="41-%E5%B1%80%E9%83%A8%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6">4.1 局部创建组件</h3>
<pre class="hljs"><code><div>    components:{
        组件名称：{
        //组件的一些配置项
        }
    }

</div></code></pre>
<h3 id="42-%E5%85%A8%E5%B1%80%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6">4.2 全局创建组件</h3>
<pre class="hljs"><code><div>    &lt;组件名称&gt;&lt;/组件名称&gt;

    Vue.component('组件名称',{
        组件的配置项
    })
</div></code></pre>
<h3 id="43-%E7%BB%84%E4%BB%B6%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99">4.3 组件命名规则</h3>
<pre class="hljs"><code><div>    1、不要用已经存在的标签名作为组件名称
    2、不要用已经存在的标签名作为组件名称，即使大写也不行，因为html不区分大小写
    3、组件名称如果用的是驼峰命名,那么渲染时候就要用“-”链接。比如： 组件名称叫：myHeader 渲染&lt;my-header&gt;&lt;/my-header&gt;
</div></code></pre>
<h3 id="44-template%E5%B1%9E%E6%80%A7">4.4 template属性</h3>
<pre class="hljs"><code><div>    1、要求只能有一个根元素（根标签）
    2、template属性内容比较乱，可以拆分出template标签
</div></code></pre>
<h3 id="45-%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9A%84data%E5%B1%9E%E6%80%A7%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0">4.5 组件中的data属性必须是一个函数</h3>
<pre class="hljs"><code><div>    如果是对象，会共用一个地址空间，一个改变也会影响其他数据。函数是一个独立的作用域不会互相干扰
</div></code></pre>
<h2 id="5-%E5%AE%89%E8%A3%85%E8%84%9A%E6%89%8B%E6%9E%B6">5 安装脚手架</h2>
<pre class="hljs"><code><div>    全局安装webpack
    npm install -g webpack
    + webpack@5.11.1
    查看版本： webpack -v

    全局安装脚手架的环境
    npm install -g @vue/cli
    + @vue/cli@4.5.10
    查看版本： vue -V
</div></code></pre>
<h3 id="51-%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE">5.1 创建项目</h3>
<ul>
<li>vue init webpack mydemo(项目名称，注意不能用驼峰，可以用 my-demo)</li>
</ul>
<h3 id="52-%E5%90%AF%E5%8A%A8%E5%91%BD%E4%BB%A4">5.2 启动命令</h3>
<pre class="hljs"><code><div>    npm run dev
    或者
    npm start

</div></code></pre>
<h3 id="53-%E6%89%93%E5%8C%85%E9%A1%B9%E7%9B%AE">5.3 打包项目</h3>
<pre class="hljs"><code><div>    npm run build

    自动生成一个dist文件夹
</div></code></pre>
<h3 id="54-%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95">5.4 项目目录</h3>
<pre class="hljs"><code><div>    README.md		阅读指南
    package.json	配置管理文件
    index.html		这是整个项目唯一的html文件
    .postcssrc.js	css配置
    .gitignore		用git上传的时候忽略的文件
    .editorconfig	编辑器的配置
    .babelrc		解析es6
    static		静态资源文件夹，用于存储js，css,图片
    node_modules	包依赖
    build		打包构建的文件夹
	build.js	打包构建文件
	check-versions.js	版本检查，检查你本地的node 和npm
	utils.js	实用工具
	vue-loader.conf.js vue加载器用来解析.vue文件
	webpack.base.conf.js 	webpack基础配置
	webpack.dev.conf.js		webpack开发环境配置
	webpack.prod.conf.js	webpack生产环境配置
    config		vue的配置文件夹
	index.js 这是基本配置
	dev.env.js	开发环境的配置
	prod.env.js	生产环境的配置
    static	静态资源（放这里不会打包）
    config 配置文件（但凡配置文件有修改，就要重启浏览器）
    src 主站场！！！
    assets 静态资源 （js,css,image 放这。放到这里 ，会被打包）
    components 组件
    router 路由
    index.js 路由配置文件
    App.vue 根组件
    main.js 主的js文件
</div></code></pre>
<h2 id="%E9%94%99%E8%AF%AF%E9%9B%86%E9%94%A6">错误集锦</h2>
<pre class="hljs"><code><div>    一、Failed to resolve filter: toLower
    ①过滤器名称可能写错了
    ②过滤器未定义

    二、Do not use built-in or reserved HTML elements as component id: div
    不要用已经存在的标签名作为组件名称

    三、Unknown custom element: &lt;myheader&gt; - did you register the component correctly? For recursive components, make sure to provide the &quot;name&quot; option.
    组件名称没有被解析，一、名字写错二、名字没有注册

    四、The &quot;data&quot; option should be a function that returns a per-instance value in component definitions.
    组件中的data必须是一个函数
</div></code></pre>
<h2 id="%E9%9D%A2%E8%AF%95%E9%A2%98">面试题</h2>
<h3 id="%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-spa-%E5%8D%95%E9%A1%B5%E9%9D%A2%E7%9A%84%E7%90%86%E8%A7%A3%E5%AE%83%E7%9A%84%E4%BC%98%E7%BC%BA%E7%82%B9%E5%88%86%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88">说说你对 SPA 单页面的理解，它的优缺点分别是什么？</h3>
<blockquote>
<p>SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。</p>
</blockquote>
<h3 id="%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8%E5%92%8C%E5%A4%9A%E9%A1%B5%E5%BA%94%E7%94%A8%E7%9A%84%E5%8C%BA%E5%88%AB">单页应用和多页应用的区别</h3>
<pre class="hljs"><code><div>&gt; 单页面应用（SinglePage Web Application，SPA）多页面应用（MultiPage Application，MPA）
&gt; 组成一个外壳页面和多个页面片段组成多个完整页面构成资源共用(css,js)共用，只需在外壳部分加载不共用，每个页面都需要加载
&gt; 刷新方式:
&gt; 页面局部刷新或更改
&gt; 整页刷新
&gt; url 模式:
&gt; a.com/#/pageone  a.com/#/pagetwo
&gt; a.com/pageone.html  a.com/pagetwo.html
&gt; 用户体验:
&gt; 页面片段间的切换快，用户体验良好
&gt; 页面切换加载缓慢，流畅度不够，用户体验比较差
&gt; 转场动画:
&gt; 容易实现
&gt; 无法实现
&gt; 数据传递:
&gt; 容易
&gt; 依赖 url传参、或者cookie 、localStorage等
&gt; 搜索引擎优化(SEO):
&gt; 需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化
&gt; 实现方法简易
&gt; 试用范围:
&gt; 高要求的体验度、追求界面流畅的应用
&gt; 适用于追求高度支持搜索引擎的应用 
&gt; 开发成本:
&gt; 较高，常需借助专业的框架
&gt; 较低 ，但页面重复代码多
&gt; 维护成本:
&gt; 相对容易
&gt; 相对复杂

</div></code></pre>
<h3 id="%E7%BB%84%E4%BB%B6%E4%B8%AD-data-%E4%B8%BA%E4%BB%80%E4%B9%88%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0">组件中 data 为什么是一个函数？</h3>
<ul>
<li>为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？</li>
</ul>
<pre class="hljs"><code><div>    因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。
</div></code></pre>
<h1 id="%E7%AC%AC%E4%BA%94%E5%A4%A9">第五天</h1>
<h2 id="1-%E5%A6%82%E6%9E%9C%E5%BC%95%E5%85%A5%E5%85%A8%E5%B1%80css%E5%92%8Cjs">1 如果引入全局css和js</h2>
<ul>
<li>在main.js中</li>
</ul>
<pre class="hljs"><code><div>    import 'xxx/xxx/xxx.css'
    import 'xxx/xxx/xxx.js'
</div></code></pre>
<h2 id="2-%E7%BB%84%E4%BB%B6%E5%86%85%E9%83%A8%E5%A6%82%E4%BD%95%E5%BC%95%E5%85%A5css%E6%96%87%E4%BB%B6">2 组件内部如何引入css文件</h2>
<pre class="hljs"><code><div>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
        <span class="hljs-keyword">@import</span> <span class="hljs-string">'xxx/xxx/xxx.css'</span>;
        <span class="hljs-keyword">@import</span> url();
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</div></code></pre>
<h2 id="3-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%BD%93%E5%89%8D%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E5%9C%A8%E5%BD%93%E5%89%8D%E6%9C%89%E6%95%88">3 如何实现当前组件样式在当前有效</h2>
<pre class="hljs"><code><div>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</div></code></pre>
<h2 id="4-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC">4 组件通信（组件传值）</h2>
<h3 id="41-%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1">4.1 父子组件通信</h3>
<ul>
<li>父组件</li>
</ul>
<pre class="hljs"><code><div>    &lt;子组件 自定义的属性=&quot;字符串&quot;  :自定义属性=&quot;属性变量&quot;&gt;&lt;/子组件&gt;

    data(){
        return{
            属性变量:''
        }
    
</div></code></pre>
<ul>
<li>子组件</li>
</ul>
<pre class="hljs"><code><div>    export default{
        props:['自定义属性1','自定义属性2','自定义属性3'...]
    }

</div></code></pre>
<h3 id="42-%E5%AD%90%E7%88%B6%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1">4.2 子父组件通信</h3>
<ul>
<li>子组件</li>
</ul>
<pre class="hljs"><code><div>    &lt;button @click='method方法'&gt;&lt;/button&gt;

    export default{
        methods:{
            method方法(){
            //$emit 事件触发
            //data属性 可以是字符串，也可以是对象或者数组
                this.$emit('自定义事件名称',data属性)
            }
        }
    }
</div></code></pre>
<ul>
<li>父组件</li>
</ul>
<pre class="hljs"><code><div>    &lt;子组件 @自定义事件名称='自己的method方法'&gt;&lt;/子组件&gt;

    export default{
        methods:{
            自己的method方法(事件源){
                //事件源就是子组件传递的data属性
            }
        }
    }
</div></code></pre>
<h3 id="43-%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1">4.3 非父子组件通信</h3>
<ul>
<li>离线存储</li>
<li>vuex状态管理（几乎都用它）</li>
<li>中央事件管理（几乎用不到）</li>
</ul>
<blockquote>
<p>main.js</p>
</blockquote>
<pre class="hljs"><code><div>    //给vue原型添加变量
    Vue.prototype.变量名= new Vue()

    发送.vue
    &lt;button @click='method方法'&gt;&lt;/button&gt;
    export default{
        methods:{
            method方法(){
            //$emit 事件触发
            //data属性 可以是字符串，也可以是对象或者数组
                this.变量名.$emit('自定义事件名称',data属性)
            }
        }
    }

    接收.vue
    mounted(){
	    this.变量名.$on('自定义事件名称',(接收数据)=&gt;{
        
        })
    }

</div></code></pre>
<h2 id="5-%E5%A6%82%E4%BD%95%E5%9C%A8%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%AD%E5%BC%95%E5%85%A5%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E5%9B%BE%E7%89%87">5 如何在脚手架中引入静态资源图片</h2>
<pre class="hljs"><code><div>    一、通过import 
    import 变量名 from '静态图片的地址'

    二、通过require()引入
</div></code></pre>
<h2 id="6-v-for%E4%B8%AD%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%86%99-key-%E5%80%BC">6 v-for中为什么要写 key 值</h2>
<ul>
<li>key值的作用</li>
</ul>
<pre class="hljs"><code><div>    用于标识唯一值

    我们说vue中的循环，采用的是“就地复用”原则。它默认只去渲染新的内容，其他的dom结构不变。给它添加key，用于元素的唯一性
</div></code></pre>
<h2 id="7-%E7%BB%84%E4%BB%B6%E5%B5%8C%E5%A5%97%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%89%A7%E8%A1%8C%E7%9A%84%E9%A1%BA%E5%BA%8F">7 组件嵌套，生命周期执行的顺序</h2>
<ul>
<li>父组件创建之前=&gt;父组件创建完成=&gt;父组件挂载之前=&gt;子组件创建之前=&gt;子组件创建完成=&gt;子组件挂载之前=&gt;子组件挂载完成=&gt;最后父组件挂载完成</li>
</ul>
<h2 id="8-props%E5%B1%9E%E6%80%A7%E7%9A%84%E9%AA%8C%E8%AF%81">8 Props属性的验证</h2>
<ul>
<li>一般情况不太用，如果你希望父传子的时候要有严格是数据类型定义，那么我们可以去利用props验证，验证你的数据来源</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-comment">//props属性验证</span>
    <span class="hljs-attr">props</span>:{
        <span class="hljs-attr">name</span>:<span class="hljs-built_in">String</span>, <span class="hljs-comment">//设定它的属性数据类型</span>
        <span class="hljs-attr">info</span>:[<span class="hljs-built_in">String</span>,<span class="hljs-built_in">Boolean</span>],<span class="hljs-comment">//多数据类型判断</span>
        <span class="hljs-attr">stuName</span>:{
            <span class="hljs-attr">type</span>:<span class="hljs-built_in">String</span>,
            <span class="hljs-attr">default</span>:<span class="hljs-string">'小王儿'</span><span class="hljs-comment">//默认值</span>
        },
        <span class="hljs-attr">stuAge</span>:{
            <span class="hljs-attr">type</span>:<span class="hljs-built_in">Number</span>,
            <span class="hljs-attr">default</span>:<span class="hljs-number">18</span>,
            <span class="hljs-attr">required</span>:<span class="hljs-literal">true</span> <span class="hljs-comment">//必填项 </span>
        },
        <span class="hljs-comment">//自定义验证方法</span>
        <span class="hljs-attr">str</span>:{
            <span class="hljs-attr">type</span>:<span class="hljs-built_in">String</span>,
            validator(val){
                <span class="hljs-built_in">console</span>.log(val,<span class="hljs-string">'要验证的内容'</span>)
                <span class="hljs-comment">//字符串长度不能超过5，超过就报错</span>
                <span class="hljs-keyword">if</span>(val.length&gt;<span class="hljs-number">5</span>){
                    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>
                }<span class="hljs-keyword">else</span>{
                    <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
                }
            }
        }
    }

</div></code></pre>
<h2 id="9-ref%E5%B1%9E%E6%80%A7">9 ref属性</h2>
<ul>
<li>快速获取dom</li>
</ul>
<pre class="hljs"><code><div>    &lt;标签 ref='自定义变量'&gt;&lt;/标签&gt;​
    
    获取
    this.$refs.自定义变量
</div></code></pre>
<h1 id="%E7%AC%AC%E5%85%AD%E5%A4%A9">第六天</h1>
<h2 id="1-%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%AD%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6">1 脚手架中引入插件</h2>
<h3 id="11-%E4%B8%8B%E8%BD%BD%E6%8F%92%E4%BB%B6">1.1 下载插件</h3>
<ul>
<li>例如jquery</li>
<li>npm install(简写i) jquery</li>
</ul>
<h2 id="12-%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A5">1.2 全局引入</h2>
<ul>
<li>main.js</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-comment">//全局引入 jquery</span>
    <span class="hljs-keyword">import</span> jq <span class="hljs-keyword">from</span> <span class="hljs-string">'jquery'</span>
    <span class="hljs-comment">//把jq挂载到vue原型上</span>
    Vue.prototype.jq = jq
</div></code></pre>
<ul>
<li>调用的组件中</li>
</ul>
<pre class="hljs"><code><div>&lt;script&gt;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  data() {
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">newsList</span>: []
    };
  },
  mounted() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>, <span class="hljs-string">"this指向当前实例"</span>);
    <span class="hljs-keyword">this</span>.jq.ajax({
      <span class="hljs-attr">url</span>: <span class="hljs-string">"http://jsonplaceholder.typicode.com/posts"</span>, <span class="hljs-comment">//你要调用的接口地址</span>
      <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.newsList = res.filter(<span class="hljs-function">(<span class="hljs-params">item, i</span>) =&gt;</span> i &lt; <span class="hljs-number">20</span>);
      }
    });
  }
};
&lt;<span class="hljs-regexp">/script&gt;



</span></div></code></pre>
<h2 id="13-%E5%B1%80%E9%83%A8%E5%BC%95%E5%85%A5">1.3 局部引入</h2>
<pre class="hljs"><code><div>&lt;script&gt;
    <span class="hljs-comment">//引入jquery插件，调用jq的ajax方法</span>
    <span class="hljs-comment">//在node中调用插架，我们可以写插件名称，它会定位到当前插件的index.js</span>
    <span class="hljs-keyword">import</span> jq <span class="hljs-keyword">from</span> <span class="hljs-string">"jquery"</span>;

    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
        <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">newsList</span>: []
        };
    },
    mounted() {
        <span class="hljs-comment">//挂载完成</span>
        <span class="hljs-comment">//生命周期首次加载触发的最后一个生命周期函数</span>
        <span class="hljs-comment">//组件一加载就获取新闻接口列表</span>
        jq.ajax({
        <span class="hljs-attr">url</span>: <span class="hljs-string">"http://jsonplaceholder.typicode.com/posts"</span>, <span class="hljs-comment">//你要调用的接口地址</span>
        <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
            <span class="hljs-built_in">console</span>.log(res, <span class="hljs-string">"接口响应"</span>);
            <span class="hljs-keyword">this</span>.newsList = res.filter(<span class="hljs-function">(<span class="hljs-params">item, i</span>) =&gt;</span> i &lt; <span class="hljs-number">20</span>);
        }
        });
    }
    };
&lt;<span class="hljs-regexp">/script&gt;


</span></div></code></pre>
<h2 id="2-%E5%9C%A8vue%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%AD%E5%BC%95%E5%85%A5swiper">2 在vue脚手架中引入swiper</h2>
<h3 id="21%E4%B8%8B%E8%BD%BDswiper%E9%9D%9E%E6%9C%80%E6%96%B0%E7%89%88%E6%9C%AC">2.1下载swiper（非最新版本）</h3>
<ul>
<li>npm install(i) swiper@5.4.5</li>
<li>注意点： 如果在组件内部引入css和js，加上scoped，你的分页样式权重不够，无法渲染。你可以把轮播图单独封装一个组件，去掉scoped属性即可。</li>
</ul>
<blockquote>
<p>main.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//全局引入轮播图的css和js</span>
    <span class="hljs-keyword">import</span> <span class="hljs-string">"swiper/js/swiper.min"</span>;
    <span class="hljs-keyword">import</span> <span class="hljs-string">"swiper/css/swiper.min.css"</span>;
</div></code></pre>
<blockquote>
<p>组建中</p>
</blockquote>
<pre class="hljs"><code><div>&lt;template&gt;
  &lt;div&gt;
    &lt;h1&gt;获取轮播图接口&lt;/h1&gt;
    &lt;!-- &lt;ul&gt;
            &lt;li v-for=&quot;item in bannerList&quot; :key='item.imageUrl'&gt;
                &lt;img :src=&quot;item.imageUrl&quot; alt=&quot;&quot;&gt;
            &lt;/li&gt;
        &lt;/ul&gt; --&gt;
    &lt;!-- swiper 视图 --&gt;
    &lt;div class=&quot;swiper-container&quot;&gt;
      &lt;div class=&quot;swiper-wrapper&quot;&gt;
        &lt;div
          v-for=&quot;item in bannerList&quot;
          :key=&quot;item.imageUrl&quot;
          class=&quot;swiper-slide&quot;
        &gt;
          &lt;img :src=&quot;item.imageUrl&quot; alt=&quot;&quot; /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
      &lt;!--分页器。如果放置在swiper-container外面，需要自定义样式。--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
//单独引入 swiper 核心库
import Swiper from &quot;swiper&quot;;
export default {
  data() {
    return {
      bannerList: []
    };
  },
  mounted() {
    //生命周期挂载
    this.jq.ajax({
      url: &quot;http://localhost:3000/banner&quot;,
      success: res =&gt; {
        console.log(res, &quot;调取接口后得到的响应&quot;);
        this.bannerList = res.banners;
        //通过调用延迟加载，下一次DOM加载的时候调用轮播图
        this.$nextTick(() =&gt; {
          // 轮播图实例化以及配置项设置
          new Swiper(&quot;.swiper-container&quot;, {
            loop: true, //循环
            //   autoplay:true,//自动切换 默认是3秒一切换
            autoplay: {
              //给自动切换设置时间
              delay: 1000
            },
            pagination: {
              //分页
              el: &quot;.swiper-pagination&quot;
            }
          });
        });
      }
    });
  }
  //通过调用生命周期中更新，当数据渲染成功之后才调用轮播图
  //   updated() {
  //     //轮播图实例化以及配置项设置
  //     new Swiper(&quot;.swiper-container&quot;, {
  //       loop: true, //循环
  //       //   autoplay:true,//自动切换 默认是3秒一切换
  //       autoplay: {
  //         //给自动切换设置时间
  //         delay: 1000
  //       },
  //       pagination: {
  //         //分页
  //         el: &quot;.swiper-pagination&quot;
  //       }
  //     });
  //   }
};
&lt;/script&gt;

&lt;style lang=&quot;&quot; scoped&gt;
    ......
&lt;/style&gt;

</div></code></pre>
<h2 id="3-is%E5%B1%9E%E6%80%A7%E7%9A%84%E4%BD%9C%E7%94%A8">3 is属性的作用</h2>
<h3 id="31-%E5%8F%AF%E4%BB%A5%E4%BB%A3%E6%9B%BF%E7%BB%84%E4%BB%B6%E6%A0%87%E7%AD%BE%E5%8E%BB%E6%B8%B2%E6%9F%93">3.1 可以代替组件标签去渲染</h3>
<pre class="hljs"><code><div>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">is</span>=<span class="hljs-string">'组件名称'</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">idv</span>&gt;</span>
</div></code></pre>
<h3 id="32-%E5%8F%AF%E4%BB%A5%E5%AE%9E%E7%8E%B0%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E5%88%87%E6%8D%A2">3.2 可以实现动态组件切换</h3>
<pre class="hljs"><code><div>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"变量属性名='组件一'"</span>&gt;</span>组件一<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"变量属性名='组件二'"</span>&gt;</span>组件二<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">'变量属性名'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    data(){
        return{
            变量属性名:'组件名称'
        }
    }

</div></code></pre>
<h2 id="4-%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E7%BC%93%E5%AD%98">4 动态组件缓存</h2>
<ul>
<li>组件在切换的过程中，缓存组件内容，使组件不需要重新实例化</li>
</ul>
<pre class="hljs"><code><div>在要缓存的组件外层加上
&lt;keep-alive&gt;&lt;/keep-alive&gt;

</div></code></pre>
<ul>
<li>切换过程中组件内容是静态内容，不需要重新渲染。有的组件依然保持动态渲染，在要动态渲染的组件内调用使激活函数 activated(){}</li>
</ul>
<pre class="hljs"><code><div>    无论组件是否被缓存
    activated(){} 这个函数都会被调用！！！

</div></code></pre>
<h2 id="5-slot%E6%A7%BD%E5%8F%A3">5 slot槽口</h2>
<ul>
<li>嵌套标签之间的内容可以渲染</li>
</ul>
<h3 id="51-%E5%8C%BF%E5%90%8D%E6%A7%BD%E5%8F%A3">5.1 匿名槽口</h3>
<blockquote>
<p>子组件</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;slot&gt;&lt;/slot&gt;
</div></code></pre>
<blockquote>
<p>父组件</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;子组件&gt;
        要渲染的内容
    &lt;/子组件&gt;
</div></code></pre>
<h3 id="52-%E5%85%B7%E5%90%8D%E6%A7%BD%E5%8F%A3">5.2 具名槽口</h3>
<blockquote>
<p>子组件</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;slot name='自定义属性名1'&gt;&lt;/slot&gt;
    &lt;slot name='自定义属性名2'&gt;&lt;/slot&gt;
    &lt;slot name='自定义属性名3'&gt;&lt;/slot&gt;
    .
    .
    .

</div></code></pre>
<blockquote>
<p>父组件</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;子组件&gt;
        &lt;div slot='自定义属性名1'&gt;内容&lt;/div&gt;
        &lt;div slot='自定义属性名2'&gt;内容&lt;/div&gt;
        &lt;div slot='自定义属性名3'&gt;内容&lt;/div&gt;
        .
        .
        .
    &lt;/子组件&gt;

</div></code></pre>
<h3 id="53-%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%A7%BD%E5%8F%A3">5.3 作用域槽口</h3>
<ul>
<li>取出嵌套组件中定义的数据</li>
</ul>
<blockquote>
<p>子组件</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;slot 自定义属性名='字符串' :自定义属性名='data中的数据属性'&gt;&lt;/slot&gt;

    自定义属性名不能是name！！！
    因为name在是具名槽口中的属性

</div></code></pre>
<blockquote>
<p>父组件</p>
</blockquote>
<pre class="hljs"><code><div>&lt;子组件&gt;
	&lt;div slot-scope='要取出数据的变量名'&gt;
	要取出数据的变量名代表了传递的json数据格式
	取值： {{要取出数据的变量名.自定义属性名}}
	&lt;/div&gt;
&lt;/子组件&gt;

</div></code></pre>
<h2 id="7-%E8%B7%AF%E7%94%B1vue-router">7 路由（Vue Router）</h2>
<blockquote>
<p>渲染方式：</p>
</blockquote>
<ul>
<li>组件嵌套</li>
<li>路由</li>
</ul>
<h3 id="71-%E6%A6%82%E5%BF%B5">7.1 概念</h3>
<ul>
<li>vue的核心插件 通过不同的地址，渲染不同的组件</li>
</ul>
<h3 id="72-%E5%AE%89%E8%A3%85">7.2 安装</h3>
<h4 id="721-%E9%80%9A%E8%BF%87%E5%AE%89%E8%A3%85%E8%84%9A%E6%89%8B%E6%9E%B6%E7%9B%B4%E6%8E%A5%E5%AE%89%E8%A3%85%E8%B7%AF%E7%94%B1%E6%8F%92%E4%BB%B6%E9%BB%98%E8%AE%A4%E8%B7%AF%E7%94%B1%E7%9A%84%E9%85%8D%E7%BD%AE%E5%B7%B2%E7%BB%8F%E8%87%AA%E5%8A%A8%E9%85%8D%E7%BD%AE%E5%AE%8C%E6%AF%95">7.2.1 通过安装脚手架直接安装路由插件，默认路由的配置已经自动配置完毕</h4>
<h4 id="722-%E5%AE%89%E8%A3%85%E8%84%9A%E6%89%8B%E6%9E%B6%E6%B2%A1%E4%B8%8B%E8%BD%BD%E8%BF%99%E4%B8%AA%E6%8F%92%E4%BB%B6-%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%8D%95%E7%8B%AC%E4%B8%8B%E8%BD%BD%E5%B9%B6%E9%85%8D%E7%BD%AE">7.2.2 安装脚手架没下载这个插件， 你可以单独下载并配置</h4>
<p>- npm install(i) vue-router</p>
<h4 id="73-%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE">7.3 路由模块基本配置</h4>
<pre class="hljs"><code><div>    <span class="hljs-comment">//封装路由模块</span>
    <span class="hljs-comment">//路由是vue的核心插件</span>
    <span class="hljs-comment">//引入核心库</span>
    <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
    <span class="hljs-comment">//引入路由插件</span>
    <span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span>
    <span class="hljs-comment">//在vue中调用路由插件</span>
    Vue.use(Router)
    <span class="hljs-comment">//实例化Router 得到它的属性和方法</span>

    <span class="hljs-comment">// console.log(new Router(),'路由');</span>

    <span class="hljs-comment">//导出去</span>
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router()

</div></code></pre>
<blockquote>
<p>main.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//全局引入 路由插件</span>
    <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span>

    <span class="hljs-keyword">new</span> Vue({
    <span class="hljs-attr">el</span>: <span class="hljs-string">"#app"</span>,
    router,
    <span class="hljs-attr">components</span>: { App },
    <span class="hljs-attr">template</span>: <span class="hljs-string">"&lt;App/&gt;"</span>
    });

</div></code></pre>
<h3 id="74-%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1">7.4 基本路由</h3>
<ul>
<li>router=&gt;index.js</li>
</ul>
<pre class="hljs"><code><div><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({
    <span class="hljs-attr">routes</span>:[<span class="hljs-comment">//路线</span>
        {
            <span class="hljs-attr">path</span>:<span class="hljs-string">'/home'</span>, <span class="hljs-comment">//地址，url访问的地址</span>
            <span class="hljs-attr">component</span>:Home
        },
        {
            <span class="hljs-attr">path</span>:<span class="hljs-string">'/cart'</span>,
            <span class="hljs-attr">component</span>:Cart
        },
        {
            <span class="hljs-attr">path</span>:<span class="hljs-string">'/mine'</span>,
            <span class="hljs-attr">component</span>:Mine
        }
    ]
})

</div></code></pre>
<h3 id="75-%E8%B7%AF%E7%94%B1%E8%A7%86%E5%9B%BE">7.5 路由视图</h3>
<ul>
<li>路由出口 app.vue</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span>

</div></code></pre>
<h3 id="76-%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA">7.6 路由导航</h3>
<pre class="hljs"><code><div>    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">'div'</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/home'</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/cart'</span>&gt;</span>购物车<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">'span'</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/mine'</span>&gt;</span>个人中心<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>

</div></code></pre>
<h3 id="77-%E8%B7%AF%E7%94%B1%E5%B5%8C%E5%A5%97">7.7 路由嵌套</h3>
<blockquote>
<p>app.vue</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">&lt;!--一级 路由出口 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span>
</div></code></pre>
<blockquote>
<p>index.vue</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">&lt;!-- 二级路由导航 --&gt;</span>
    <span class="hljs-comment">&lt;!-- &lt;router-link to='/index/home'&gt;首页&lt;/router-link&gt;
    &lt;router-link to='/index/cart'&gt;购物车&lt;/router-link&gt;
    &lt;router-link to='/index/mine'&gt;个人中心&lt;/router-link&gt; --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/home'</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/cart'</span>&gt;</span>购物车<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/mine'</span>&gt;</span>个人中心<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- 二级路由出口 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span>

</div></code></pre>
<blockquote>
<p>index.js</p>
</blockquote>
<pre class="hljs"><code><div>
    <span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">"@/components/home"</span>;
    <span class="hljs-keyword">import</span> Cart <span class="hljs-keyword">from</span> <span class="hljs-string">"@/components/cart"</span>;
    <span class="hljs-keyword">import</span> Mine <span class="hljs-keyword">from</span> <span class="hljs-string">"@/components/mine"</span>;
    <span class="hljs-keyword">import</span> Play <span class="hljs-keyword">from</span> <span class="hljs-string">"@/components/play"</span>;
    <span class="hljs-keyword">import</span> Index <span class="hljs-keyword">from</span> <span class="hljs-string">"@/components/index"</span>;

    <span class="hljs-comment">//导出去</span>
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({
    <span class="hljs-attr">routes</span>: [
        <span class="hljs-comment">//路线</span>
        <span class="hljs-comment">//一级路由</span>
        {
        <span class="hljs-attr">path</span>: <span class="hljs-string">"/index"</span>,
        <span class="hljs-attr">component</span>: Index,
        <span class="hljs-comment">//路由再哪里渲染就在哪里注册</span>
        <span class="hljs-attr">children</span>: [
            <span class="hljs-comment">//省略“/” 访问的地址 “/一级/二级”,如果没有省略“/” 访问地址“/二级”</span>
            <span class="hljs-comment">// {</span>
            <span class="hljs-comment">//     path:'home',</span>
            <span class="hljs-comment">//     component:Home</span>
            <span class="hljs-comment">// },</span>
            <span class="hljs-comment">// {</span>
            <span class="hljs-comment">//     path:'cart',</span>
            <span class="hljs-comment">//     component:Cart</span>
            <span class="hljs-comment">// },</span>
            <span class="hljs-comment">// {</span>
            <span class="hljs-comment">//     path:'mine',</span>
            <span class="hljs-comment">//     component:Mine</span>
            <span class="hljs-comment">// }</span>
            {
            <span class="hljs-attr">path</span>: <span class="hljs-string">"/home"</span>,
            <span class="hljs-attr">component</span>: Home
            },
            {
            <span class="hljs-attr">path</span>: <span class="hljs-string">"/cart"</span>,
            <span class="hljs-attr">component</span>: Cart
            },
            {
            <span class="hljs-attr">path</span>: <span class="hljs-string">"/mine"</span>,
            <span class="hljs-attr">component</span>: Mine
            },
            {
            <span class="hljs-comment">//二级路由重定向</span>
            <span class="hljs-attr">path</span>: <span class="hljs-string">""</span>,
            <span class="hljs-attr">redirect</span>: <span class="hljs-string">"/home"</span>
            }
        ]
        },
        {
        <span class="hljs-attr">path</span>: <span class="hljs-string">"/play"</span>,
        <span class="hljs-attr">component</span>: Play
        },
        {
        <span class="hljs-comment">//一级路由重定向</span>
        <span class="hljs-attr">path</span>: <span class="hljs-string">"*"</span>,
        <span class="hljs-attr">redirect</span>: <span class="hljs-string">"/index"</span>
        }
    ]
    });

</div></code></pre>
<h3 id="78-%E8%B7%AF%E7%94%B1%E9%87%8D%E5%AE%9A%E5%90%91">7.8 路由重定向</h3>
<blockquote>
<p>一级路由重定</p>
</blockquote>
<pre class="hljs"><code><div>    {
        <span class="hljs-attr">path</span>:<span class="hljs-string">'*'</span>,
        <span class="hljs-attr">redirect</span>:<span class="hljs-string">'你要渲染的path地址'</span>
    }
</div></code></pre>
<blockquote>
<p>二级路由重定向</p>
</blockquote>
<pre class="hljs"><code><div>    {
        <span class="hljs-attr">path</span>:<span class="hljs-string">''</span>,
        <span class="hljs-attr">redirect</span>:<span class="hljs-string">'你要渲染的path地址'</span>
    }

</div></code></pre>
<h1 id="%E7%AC%AC%E4%B8%83%E5%A4%A9">第七天</h1>
<h2 id="1-%E8%B7%AF%E7%94%B1">1  路由</h2>
<h3 id="11-%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1">1.1 动态路由</h3>
<ul>
<li>router =&gt; index.js</li>
</ul>
<pre class="hljs"><code><div>    首先要修改路由地址
    比如： 
        {
        path:'/地址/:地址变量(自定义)',
        component:组件名称
    },

</div></code></pre>
<ul>
<li>组件中跳转</li>
</ul>
<blockquote>
<p>路由导航跳转</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;router-link  :to=&quot;'/地址/'+携带的参数变量&quot;&gt;&lt;/router-link&gt;
</div></code></pre>
<blockquote>
<p>取值</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-keyword">this</span>.$route.params.地址变量(自定义)
</div></code></pre>
<h2 id="2-%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA">2 编程式导航</h2>
<pre class="hljs"><code><div>    原生historyAPI方法
    https://developer.mozilla.org/en-US/docs/Web/API/History_API
    原生pushState() 原生replaceState()
    https://developer.mozilla.org/en-US/docs/Web/API/History

</div></code></pre>
<blockquote>
<p>push</p>
</blockquote>
<ul>
<li>往历史记录中添加一条数据</li>
</ul>
<blockquote>
<p>replace</p>
</blockquote>
<ul>
<li>替换当前这一条历史记录</li>
</ul>
<blockquote>
<p>go(n)</p>
</blockquote>
<ul>
<li>go() 跳转，n是一个整数</li>
</ul>
<blockquote>
<p>back()</p>
</blockquote>
<ul>
<li>回退</li>
</ul>
<h2 id="3-query%E4%BC%A0%E5%80%BC">3 query传值</h2>
<blockquote>
<p>跳转</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;router-link :to=&quot;'/list?id(自定义)='+数据id&quot;&gt;&lt;/router-link&gt;

    跳转之后取值
    this.$route.query.id(自定义)
</div></code></pre>
<blockquote>
<p>通过编程式导航进行跳转</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;div @click='方法名(数据id)'&gt;分类名称&lt;/div&gt;
    methods:{
        方法名(id变量){
            this.$router.push(/list?id='+id变量)
            或者
            this.$router.push({
                path:'/list',
                query:{
                    id(自定义):id变量
                }
            })
        }
    }

    跳转之后取值
    this.$route.query.id(自定义)
</div></code></pre>
<h2 id="4-%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F">4 路由模式</h2>
<h3 id="41-%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F">4.1 如何设置路由模式</h3>
<ul>
<li>
<pre><code>router=&gt;index.js
</code></pre>
</li>
</ul>
<pre class="hljs"><code><div>    mode:'history' history模式
    mode:&quot;hash&quot;  哈希模式
</div></code></pre>
<h4 id="411-history%E5%80%9F%E9%89%B4%E4%BA%8Ehistoryapi">4.1.1 history（借鉴于HistoryAPI）</h4>
<ul>
<li>不带#号。</li>
</ul>
<h4 id="412-%E5%93%88%E5%B8%8C%E6%A8%A1%E5%BC%8Fhash-%E9%BB%98%E8%AE%A4%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F">4.1.2 哈希模式（hash 默认路由模式）</h4>
<ul>
<li>带#</li>
</ul>
<h3 id="42-%E8%B7%AF%E7%94%B1%E4%B8%A4%E7%A7%8D%E6%A8%A1%E5%BC%8F-hash%E5%92%8Chistory%E7%9A%84%E5%8C%BA%E5%88%AB">4.2 路由两种模式 hash和history的区别</h3>
<pre class="hljs"><code><div>    一个带#，一个不带#号。
    从打包运行机制来聊这个问题

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
    当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

    不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
</div></code></pre>
<h3 id="43-%E6%89%93%E5%8C%85%E5%91%BD%E4%BB%A4">4.3 打包命令</h3>
<pre class="hljs"><code><div>    npm run build
</div></code></pre>
<h2 id="5-%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD">5 路由懒加载</h2>
<pre class="hljs"><code><div>    一、const 变量= ()=&gt;import('地址')
    {
        path:'',
        components:变量
    }

    二、 
    {
        path:'',
        components:()=&gt;import('地址')
    }
</div></code></pre>
<h2 id="6-%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB">6 路由守卫</h2>
<h3 id="61-%E5%85%A8%E5%B1%80%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB">6.1 全局导航守卫</h3>
<ul>
<li>全局前置钩子函数(用的比较多)</li>
</ul>
<pre class="hljs"><code><div>    路由.beforeEach((to,from,next)=&gt;{})
</div></code></pre>
<ul>
<li>后置导航钩子函数</li>
</ul>
<pre class="hljs"><code><div>    路由.afterEach((to,from)=&gt;{})
</div></code></pre>
<h3 id="62-%E8%B7%AF%E7%94%B1%E6%8B%A6%E6%88%AA%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB">6.2 路由拦截（路由独享导航守卫）</h3>
<ul>
<li>router=&gt;index.js</li>
</ul>
<pre class="hljs"><code><div>    {
        ​path:'',
        ​component:,
        ​beforeEnter(to,from,next){
            ...
        }
    }
</div></code></pre>
<h3 id="63-%E7%BB%84%E4%BB%B6%E7%9A%84%E6%8B%A6%E6%88%AA">6.3 组件的拦截</h3>
<ul>
<li>在组件内部被触发</li>
</ul>
<pre class="hljs"><code><div>    beforeRouteEnter(to,from,next){
    ​		//进入组件之间
    }

    beforeRouteUpdate(to,from,next){
    ​		//组件之间的更新
    }

    beforeRouteLeave(to,from,next){
    ​		//离开组件
    }

</div></code></pre>
<h2 id="7-%E5%B0%81%E8%A3%85%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6">7 封装全局组件</h2>
<pre class="hljs"><code><div>    创建一个文件夹，用来放置全局组件视图（.vue）。
    创建index.js模块，这个模块用于管理组件
    在main.js中引入封装好的模块，然后循环并创建全局组件
</div></code></pre>
<blockquote>
<p>index.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//引入无限组件</span>
    <span class="hljs-keyword">import</span> goBack <span class="hljs-keyword">from</span> <span class="hljs-string">'./goBack.vue'</span>
    <span class="hljs-keyword">import</span> goSearch <span class="hljs-keyword">from</span> <span class="hljs-string">'./goSearch.vue'</span>

    <span class="hljs-comment">// 导出当前内容</span>
    <span class="hljs-comment">//export default{}  整个模块只能有一个   引入就用  import 名字 from ‘地址’</span>
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
        goBack,
        goSearch
    }
</div></code></pre>
<blockquote>
<p>main.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//引入封装好的共通组件模块</span>
    <span class="hljs-keyword">import</span> gCom <span class="hljs-keyword">from</span> <span class="hljs-string">'./common'</span>
    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i <span class="hljs-keyword">in</span> gCom){
        Vue.component(i,gCom[i])
    }
</div></code></pre>
<h2 id="8-%E5%BC%95%E5%85%A5iconfont%E9%98%BF%E9%87%8C%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%BA%93">8 引入iconfont阿里矢量图库</h2>
<h3 id="81-%E5%A6%82%E4%BD%95%E5%BC%95%E5%85%A5">8.1 如何引入</h3>
<p>main.js</p>
<pre class="hljs"><code><div>    <span class="hljs-comment">//全局引入阿里矢量</span>
    <span class="hljs-keyword">import</span> <span class="hljs-string">'./assets/font/iconfont.css'</span>
</div></code></pre>
<h2 id="9-%E5%85%A8%E5%B1%80%E5%88%9B%E5%BB%BA%E8%BF%87%E6%BB%A4%E5%99%A8">9 全局创建过滤器</h2>
<pre class="hljs"><code><div>    创建一个文件夹，用来放置全局过滤器逻辑。
    创建index.js模块，这个模块用于管理过滤器
    在main.js中引入封装好的模块，然后循环并创建过滤器

</div></code></pre>
<blockquote>
<p>index.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> toTime <span class="hljs-keyword">from</span> <span class="hljs-string">'./toTime'</span>
    <span class="hljs-keyword">import</span> toPrice <span class="hljs-keyword">from</span> <span class="hljs-string">'./toPrice'</span>

    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
        toTime,
        toPrice
    }
</div></code></pre>
<blockquote>
<p>main.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//全局引入过滤器</span>
    <span class="hljs-keyword">import</span> gFilter <span class="hljs-keyword">from</span> <span class="hljs-string">'./filters'</span>
    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i <span class="hljs-keyword">in</span> gFilter){
        Vue.filter(i,gFilter[i])
    }

</div></code></pre>
<h2 id="10-%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A5%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB">10 全局引入过渡动画</h2>
<blockquote>
<p>main.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//全局引入过渡动画</span>
    <span class="hljs-keyword">import</span> <span class="hljs-string">'animate.css/animate.css'</span>


    &lt;!-- 二级路由出口 --&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">transition</span> <span class="hljs-attr">enter-active-class</span>=<span class="hljs-string">"animate__animated animate__lightSpeedInRight"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">transition</span>&gt;</span></span>
</div></code></pre>
<h2 id="11-%E8%B7%AF%E7%94%B1%E9%9B%B6%E7%A2%8E%E7%9F%A5%E8%AF%86%E7%82%B9">11 路由零碎知识点</h2>
<ul>
<li>name属性</li>
</ul>
<pre class="hljs"><code><div>    取值： $route.name
    在页面的 $router 中显示当前页的名字
</div></code></pre>
<ul>
<li>alise 别名</li>
</ul>
<pre class="hljs"><code><div>    通过设置别名地址去访问路由地址
</div></code></pre>
<h2 id="%E9%9D%A2%E8%AF%95%E9%A2%98">面试题</h2>
<h3 id="hash%E6%A8%A1%E5%BC%8F%E5%92%8Chistory%E6%A8%A1%E5%BC%8F">hash模式和history模式</h3>
<blockquote>
<p>区别：
hash模式：
1.采用的是window.onhashchange事件实现。
2.可以实现前进 后退 刷新。
3.比如这个URL：http://www.zhenbang.com/#/index, hash 为#/index。
它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，
对后端完全没有影响，因此改变hash不会重新加载页面
history模式：
1.采用的是利用了HTML5 History Interface 中新pushState() 和replaceState() 方法。
2.可以前进、后退，但是刷新有可能会出现404的报错
3.前端的url必须和实际向后端发起请求的url 一致http://www.haha.com/niu/id 。
如果后端缺少对/niu/id 的路由处理，将返回404错误。
不过这种模式要玩好，还需要后台配置支持。因为我 用是个单页客户端应用，
如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id，这就不好看
所以呢，你要在服务端增加一个覆盖所有情况的候选 如果 URL 匹配不到任何静态资源，
则应该返回同一个 index.html 页面，这个页面就 app 依赖的页面。</p>
</blockquote>
<h1 id="%E7%AC%AC%E5%85%AB%E5%A4%A9">第八天</h1>
<h2 id="1-axios">1 Axios</h2>
<h3 id="11-%E6%A6%82%E5%BF%B5">1.1 概念</h3>
<ul>
<li>axios 是基于promise创建的http状态库可以用于浏览器和node.js，用于交互</li>
<li>axios它不是vue中的属性或者方法</li>
</ul>
<h3 id="12-%E5%AE%98%E7%BD%91%E5%9C%B0%E5%9D%80">1.2 官网地址</h3>
<pre class="hljs"><code><div>    中文官网： http://www.axios-js.com/
    英文npm网页： https://www.npmjs.com/package/axios
</div></code></pre>
<h3 id="13-%E7%89%B9%E7%82%B9">1.3 特点</h3>
<pre class="hljs"><code><div>    从浏览器中创建 XMLHttpRequests
    从 node.js 创建 http 请求
    支持 Promise API
    拦截请求和响应
    转换请求数据和响应数据
    取消请求
    自动转换 JSON 数据
    客户端支持防御 XSRF(跨站请求伪造)
</div></code></pre>
<h3 id="14-%E4%B8%8B%E8%BD%BD">1.4 下载</h3>
<ul>
<li>npm install(i) axios</li>
</ul>
<h3 id="15-%E4%BA%A4%E4%BA%92%E6%96%B9%E5%BC%8F%E4%B9%8Bget">1.5 交互方式之get</h3>
<blockquote>
<p>方式一</p>
</blockquote>
<pre class="hljs"><code><div>    axios({
        <span class="hljs-attr">url</span>:<span class="hljs-string">'访问地址'</span>,
        <span class="hljs-attr">method</span>:<span class="hljs-string">'get'</span>,<span class="hljs-comment">//交互方式，可以省略</span>
        params：{
            <span class="hljs-comment">//入参 对象体</span>
        }
    })
    .then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
        res响应
    })
    .catch(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{
        err错误
    })

</div></code></pre>
<blockquote>
<p>方式二</p>
</blockquote>
<pre class="hljs"><code><div>    axios.get(<span class="hljs-string">'url地址'</span>，{
        <span class="hljs-attr">params</span>:{}
    })
    .then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
        res响应
    })
    .catch(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{
        err错误
    })

</div></code></pre>
<blockquote>
<p>方式三</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getInfo</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">try</span>{
        <span class="hljs-keyword">let</span> res = <span class="hljs-keyword">await</span> axios.get(<span class="hljs-string">'url地址'</span>)
        }<span class="hljs-keyword">catch</span>(err){
        <span class="hljs-comment">//错误捕获</span>
        }
    }

</div></code></pre>
<h3 id="16-%E5%85%A8%E5%B1%80%E5%BA%94%E7%94%A8axios">1.6 全局应用axios</h3>
<ul>
<li>创建一个util文件夹创建一个axios文件夹index.js和axios.js</li>
</ul>
<blockquote>
<p>index.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>

    <span class="hljs-keyword">let</span> http = axios.create({

    })

    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> http
</div></code></pre>
<blockquote>
<p>axios.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> http <span class="hljs-keyword">from</span> <span class="hljs-string">'./axios'</span>

    <span class="hljs-comment">//封装一个 推荐歌单接口</span>
    <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getSongs</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">return</span> http.get(<span class="hljs-string">'/personalized'</span>)
    }

    <span class="hljs-comment">//封装一个banner接口</span>
    <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getBanner</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">return</span> http.get(<span class="hljs-string">'/banner'</span>)
    }
</div></code></pre>
<blockquote>
<p>视图调用</p>
</blockquote>
<pre class="hljs"><code><div>    方法一：
    <span class="hljs-keyword">import</span> {封装好的接口名称} <span class="hljs-keyword">from</span> <span class="hljs-string">'接口地址'</span>
    封装好的接口名称()
    .then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
        res响应
    })
    .catch(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{
        err错误
    })



    <span class="hljs-keyword">async</span>和<span class="hljs-keyword">await</span> 封装方法：
    mounted(){
        <span class="hljs-keyword">this</span>.方法名()
    }
    <span class="hljs-attr">methods</span>:{
        <span class="hljs-keyword">async</span> 方法名(){
            <span class="hljs-keyword">await</span> 封装好的接口名称
        }
    }
</div></code></pre>
<h3 id="17-%E4%BA%A4%E4%BA%92%E6%96%B9%E5%BC%8F%E4%B9%8Bpost">1.7 交互方式之post</h3>
<blockquote>
<p>直接调用axios方法</p>
</blockquote>
<pre class="hljs"><code><div>    axios({
        <span class="hljs-attr">url</span>:<span class="hljs-string">'接口地址'</span>,
        <span class="hljs-attr">method</span>:<span class="hljs-string">'post'</span>,
        <span class="hljs-attr">data</span>:{<span class="hljs-comment">//入参</span>
            
        }
    })
    .then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
        res响应
    })
    .catch(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{
        err错误
    })

</div></code></pre>
<blockquote>
<p>调用axios库上的post方法</p>
</blockquote>
<pre class="hljs"><code><div>    axios.post(<span class="hljs-string">'url地址'</span>,{对象体})
    .then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{
        res响应
    })
    .catch(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span>{
        err错误
    })

    <span class="hljs-comment">// =====================</span>
    <span class="hljs-comment">// 第二种方式：</span>
    <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getInfo</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">try</span>{
        <span class="hljs-keyword">let</span> res = <span class="hljs-keyword">await</span> axios.post(<span class="hljs-string">'url地址'</span>)
        }<span class="hljs-keyword">catch</span>(err){
        <span class="hljs-comment">//错误捕获</span>
        }
    }

</div></code></pre>
<h2 id="2-vuex%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86">2 Vuex状态管理</h2>
<ul>
<li>整个vuex 是借鉴了React中的Redux思想 和 Flux思想</li>
</ul>
<h3 id="21-%E6%A6%82%E5%BF%B5">2.1 概念</h3>
<blockquote>
<p>vuex是什么？</p>
</blockquote>
<ul>
<li>它是vue的核心插件！！！它用于状态（数据）管理</li>
<li>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化</li>
<li>用于管理数据，想要修改必须按照vuex的修改方式去修改</li>
</ul>
<h3 id="22-%E5%AE%98%E7%BD%91">2.2 官网</h3>
<ul>
<li>https://vuex.vuejs.org/zh/</li>
</ul>
<h3 id="23-%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85">2.3 下载安装</h3>
<ul>
<li>npm install(i) vuex</li>
</ul>
<h3 id="24-%E5%BA%94%E7%94%A8">2.4 应用</h3>
<ul>
<li>src =&gt; 创建store文件夹 =&gt; index.js</li>
</ul>
<blockquote>
<p>index.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//引入核心库</span>
    <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
    <span class="hljs-comment">//引入 vuex 插件</span>
    <span class="hljs-keyword">import</span> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>

    <span class="hljs-comment">//使用一下</span>
    Vue.use(Vuex)

    <span class="hljs-comment">//Vuex 是一个大对象，里面有Store()仓库构造函数 还有辅助性函数。。。</span>

    <span class="hljs-comment">// console.log(Vuex.Store,'who');</span>

    <span class="hljs-comment">//导出仓库</span>
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Vuex.Store({
        <span class="hljs-comment">//state</span>

    })
</div></code></pre>
<blockquote>
<p>main.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//引入封装好的仓库</span>
    <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'./store'</span>

    <span class="hljs-keyword">new</span> Vue({
    <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
    router,
    store,
    <span class="hljs-attr">components</span>: { App },
    <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>
    })

</div></code></pre>
<h3 id="25-state">2.5 State</h3>
<ul>
<li>用于管理数据，唯一的管理数据方法</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-keyword">new</span> Vuex.Store({
        <span class="hljs-attr">state</span>:{
        <span class="hljs-comment">//数据对象</span>
        }
    })

</div></code></pre>
<h3 id="26-mutation">2.6 mutation</h3>
<ul>
<li>修改state的唯一方式</li>
<li>同步操作方法</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 状态层</span>
    <span class="hljs-keyword">new</span> Vuex.Store({
        <span class="hljs-attr">mutations</span>:{<span class="hljs-comment">//n个修改state的方法</span>
            <span class="hljs-comment">//数据对象</span>
            mutation名称(){
            
            }
        }
    })

    <span class="hljs-comment">// 视图层</span>
    <span class="hljs-attr">methods</span>:{
        方法名(){
            仓库.commit(<span class="hljs-string">'mutation名称'</span>)
        }
    }

</div></code></pre>
<h3 id="27-getters">2.7 getters</h3>
<ul>
<li>它类似于vue中computed计算属性，它可以缓存，它作为视图层和状态层中的中间层存在,让state渲染更加的方便简单</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-keyword">new</span> Vuex.Store({
        <span class="hljs-attr">getters</span>:{
            属性名称(state){
                <span class="hljs-keyword">return</span> state.属性名
            }
        }
    })

    <span class="hljs-comment">// 视图层</span>
     {{$store.getters.属性名称}}

</div></code></pre>
<h3 id="28-actions">2.8 actions</h3>
<ul>
<li>action 它类似mutation，但是要想修改state属性还是要去操作mutation</li>
<li>它是异步操作，当然也可以操作同步</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 不传参数</span>
    <span class="hljs-comment">// 组件触发：</span>
    方法名(){
        <span class="hljs-keyword">this</span>.$store.dispatch(<span class="hljs-string">'type名称'</span>)
    }
    <span class="hljs-keyword">new</span> Vuex.Store({
        <span class="hljs-attr">actions</span>:{
            type名称(context){
                context.commit(<span class="hljs-string">'mutation方法'</span>)
            }
            <span class="hljs-comment">// 或者代码优化</span>
            type名称({commit}){
                commit(<span class="hljs-string">'mutation方法'</span>) 
            }
        }
    })


    <span class="hljs-comment">// 传递参数</span>
    方法名(){
        <span class="hljs-keyword">this</span>.$store.dispatch(<span class="hljs-string">'type名称'</span>,参数)
    }
    <span class="hljs-attr">actions</span>:{
        type名称(context,参数){
            context.commit(<span class="hljs-string">'mutation方法'</span>,参数)
        }
        <span class="hljs-comment">// 或者代码优化</span>
        type名称({commit},参数){
            commit(<span class="hljs-string">'mutation方法'</span>,参数) 
        }
    }
</div></code></pre>
<h1 id="%E7%AC%AC%E4%B9%9D%E5%A4%A9">第九天</h1>
<h2 id="1-%E8%BE%85%E5%8A%A9%E6%80%A7%E5%87%BD%E6%95%B0">1 辅助性函数</h2>
<h3 id="11-state">1.1 state</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 它是vuex的唯一数据源 </span>
    <span class="hljs-comment">// mapState（很少用）</span>
    <span class="hljs-keyword">import</span> {mapState} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>
    <span class="hljs-attr">computed</span>:{
        ...mapState([<span class="hljs-string">'仓库中state值'</span>])
        ...mapState({
            想要渲染的名字:<span class="hljs-function"><span class="hljs-params">state</span>=&gt;</span>state.值
        })
    }

</div></code></pre>
<h3 id="112-getters">1.1.2 getters</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 相当于计算属性。它作为，state和视图的中间层存在。它具有缓存效果</span>
    <span class="hljs-comment">// mapGetter</span>

    <span class="hljs-keyword">import</span> {mapGetters} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>
    <span class="hljs-attr">computed</span>:{
        ...mapState([<span class="hljs-string">'仓库中getters值1'</span>,<span class="hljs-string">'仓库中getters值2'</span>,...])
        ...mapState({
            想要渲染的名字:<span class="hljs-function"><span class="hljs-params">geter</span>=&gt;</span>getter.值
        })
}
</div></code></pre>
<h3 id="113-mutations">1.1.3 mutations</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 它是修改state的唯一方式，同步的</span>
    <span class="hljs-comment">// mapMutations</span>

    <span class="hljs-keyword">import</span> {mapMutations} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>
    <span class="hljs-attr">methods</span>:{
        ...mapMutations([<span class="hljs-string">'mutations名字一致'</span>]),
        ...mapMutations({
            <span class="hljs-string">'自定义函数名称'</span>:<span class="hljs-string">'mutations名字'</span>
        })
    }

</div></code></pre>
<h3 id="114-actions">1.1.4 actions</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 它不能直接修改state,它只能commit一个mutations</span>
    <span class="hljs-comment">// 它可以操作异步方法</span>
    <span class="hljs-comment">// mapActions</span>

    <span class="hljs-keyword">import</span> {mapActions} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>
    <span class="hljs-attr">methods</span>:{
        ...mapActions([<span class="hljs-string">'actions名字一致'</span>]),
        ...mapActions({
            <span class="hljs-string">'自定义函数名称'</span>:<span class="hljs-string">'actions名字'</span>
        })
    }
</div></code></pre>
<h3 id="115-vuex%E5%92%8C%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB">1.1.5 Vuex和本地存储之间的区别</h3>
<pre class="hljs"><code><div>    相同点：数据都可以给各个组件共享

    不同点： 
    vuex 刷新，数据回到初始状态。所有的数据不能数据持久化（不能永久性存储），当数据依赖发生变化，视图立马响应。
    localStorage 可以数据持久化，但是当内容发生变化，重新存储。不能立马响应必须重新刷新页面才可以响应

    当我们要刷新数据还能立马响应并持久化。就得两者结合使用！

</div></code></pre>
<h2 id="2-ui%E6%A1%86%E6%9E%B6">2 UI框架</h2>
<h3 id="21-ui%E6%A1%86%E6%9E%B6%E4%B9%8Bpc%E7%AB%AF%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE">2.1 UI框架之PC端(后台管理项目)</h3>
<ul>
<li>
<p>elementUI</p>
</li>
<li>
<p>https://element.eleme.cn/#/zh-CN</p>
</li>
<li>
<p>iview  http://v1.iviewui.com/</p>
</li>
<li>
<p>Ant Design of Vue  https://www.antdv.com/components/button-cn/</p>
</li>
</ul>
<pre class="hljs"><code><div>    npm install(i) element-ui


    <span class="hljs-comment">// main.js</span>
    <span class="hljs-comment">//全局引入 element UI </span>
    <span class="hljs-keyword">import</span> elementUI <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui'</span>
    <span class="hljs-comment">//全局引入样式</span>
    <span class="hljs-keyword">import</span> <span class="hljs-string">'element-ui/lib/theme-chalk/index.css'</span>
    Vue.use(elementUI)

</div></code></pre>
<h3 id="22-ui%E6%A1%86%E6%9E%B6%E4%B9%8B%E7%A7%BB%E5%8A%A8%E7%AB%AF">2.2 UI框架之移动端</h3>
<blockquote>
<p>mint UI</p>
</blockquote>
<ul>
<li>http://mint-ui.github.io/#!/zh-cn</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 安装:</span>
    npm install mint-ui


    <span class="hljs-comment">// main.js</span>
    <span class="hljs-keyword">import</span> MintUI <span class="hljs-keyword">from</span> <span class="hljs-string">'mint-ui'</span>
    <span class="hljs-keyword">import</span> <span class="hljs-string">'mint-ui/lib/style.min.css'</span>
    Vue.use(MintUI)

</div></code></pre>
<blockquote>
<p>vant UI</p>
</blockquote>
<pre class="hljs"><code><div>    npm install(i) vant


    <span class="hljs-comment">//引入 vant UI  框架</span>
    <span class="hljs-keyword">import</span> VantUI <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>
    <span class="hljs-keyword">import</span> <span class="hljs-string">'vant/lib/index.css'</span>
    Vue.use(VantUI)

</div></code></pre>
<h2 id="3-stylus-css%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8">3 stylus （css预处理器）</h2>
<h3 id="31-%E6%A6%82%E5%BF%B5">3.1 概念</h3>
<ul>
<li>富于表现力、动态的、健壮的 CSS</li>
</ul>
<h3 id="32-%E5%AE%98%E7%BD%91">3.2 官网</h3>
<ul>
<li>https://stylus.bootcss.com/</li>
</ul>
<h3 id="33-%E4%B8%8B%E8%BD%BD">3.3 下载</h3>
<pre class="hljs"><code><div>    首先要下载 stylus 插件，再去下载它的加载器
    npm install(i) stylus
    npm install(i) stylus-loader@3.0.2

    npm i stylus stylus-loader@3.0.2

</div></code></pre>
<h1 id="%E7%AC%AC%E5%8D%81%E5%A4%A9">第十天</h1>
<h2 id="1-%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%A7%8B">1 项目开始</h2>
<h3 id="11-%E5%88%9B%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE">1.1 创建新项目</h3>
<ul>
<li>vue init webpack mydemo</li>
</ul>
<h3 id="12-%E5%88%86%E6%9E%90%E9%80%BB%E8%BE%91%E9%9C%80%E6%B1%82%E4%B8%8B%E8%BD%BD%E7%9B%B8%E5%85%B3%E6%8A%80%E6%9C%AF%E6%A0%88%E4%BB%A5%E5%8F%8A%E6%8F%92%E4%BB%B6">1.2 分析逻辑需求，下载相关技术栈以及插件</h3>
<pre class="hljs"><code><div>    vue-router
    vuex
    axios
    stylus
    stylus-loader@3.0.2
    element-ui

</div></code></pre>
<h3 id="13-%E5%88%9B%E5%BB%BA%E7%9B%B8%E5%85%B3%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84">1.3 创建相关的目录结构</h3>
<pre class="hljs"><code><div>src 
	common	共同组件
	components 组件
	pages	一级路由组件
	views	二级路由组件
	filters	过滤器
	router	路由
	store	状态仓库
	util	实用工具
	App.vue
	main.js

</div></code></pre>
<h3 id="14-%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1%E6%96%87%E4%BB%B6">1.4 配置路由文件</h3>
<blockquote>
<p>router =&gt; index.js</p>
</blockquote>
<pre class="hljs"><code><div><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span>
Vue.use(Router)

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({
  <span class="hljs-attr">routes</span>: [
    {
      <span class="hljs-attr">path</span>: <span class="hljs-string">'/index'</span>,
      <span class="hljs-attr">component</span>: <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span><span class="hljs-keyword">import</span>(<span class="hljs-string">'@/pages/index'</span>),
      <span class="hljs-attr">children</span>:[
        {
          <span class="hljs-attr">path</span>:<span class="hljs-string">'/home'</span>,
          <span class="hljs-attr">component</span>:<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span><span class="hljs-keyword">import</span>(<span class="hljs-string">'@/views/home'</span>)
        },
        {
          <span class="hljs-attr">path</span>:<span class="hljs-string">''</span>,
          <span class="hljs-attr">redirect</span>:<span class="hljs-string">'/home'</span>
        }
      ]
    },
    {
      <span class="hljs-attr">path</span>:<span class="hljs-string">'*'</span>,
      <span class="hljs-attr">redirect</span>:<span class="hljs-string">'/login'</span>
    }
  ]
})

</div></code></pre>
<h3 id="15-%E5%89%8D%E7%AB%AF%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98">1.5 前端解决跨域问题</h3>
<blockquote>
<p>config =&gt;index.js</p>
</blockquote>
<pre class="hljs"><code><div>
    <span class="hljs-attr">proxyTable</span>: {<span class="hljs-comment">//代理服务，用于解决跨域问题，一旦修改一定重启前台服务</span>
      <span class="hljs-string">'/api'</span>:{
        <span class="hljs-attr">target</span>:<span class="hljs-string">'http://localhost:3000'</span>,<span class="hljs-comment">//你要解决跨域的目标地址</span>
        <span class="hljs-attr">changeOrigin</span>:<span class="hljs-literal">true</span>,<span class="hljs-comment">//是否要跨域</span>
        <span class="hljs-attr">pathRewrite</span>:{<span class="hljs-comment">//地址重写</span>
          <span class="hljs-string">'^/api'</span>:<span class="hljs-string">'http://localhost:3000'</span>
        }
      }
    },


</div></code></pre>
<h1 id="%E7%AC%AC%E5%8D%81%E5%9B%9B%E5%A4%A9">第十四天</h1>
<h2 id="1-highcharts">1 HighCharts</h2>
<h3 id="11-%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85">1.1 下载安装</h3>
<blockquote>
<p>通过CDN的引入方式</p>
</blockquote>
<pre class="hljs"><code><div>    http://code.highcharts.com.cn/highcharts/8.2.2/highcharts.js
</div></code></pre>
<blockquote>
<p>通过下载本引入的方式</p>
</blockquote>
<pre class="hljs"><code><div>    https://www.highcharts.com.cn/download
</div></code></pre>
<blockquote>
<p>通过npm 安装</p>
</blockquote>
<pre class="hljs"><code><div>    npm install(i)  highcharts

    + highcharts@8.2.2

</div></code></pre>
<h3 id="12-%E5%9F%BA%E6%9C%AC%E5%BA%94%E7%94%A8">1.2 基本应用</h3>
<pre class="hljs"><code><div><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- 第一步 引入核心的图表库 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../node_modules/highcharts/highcharts.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
        <span class="hljs-selector-id">#container</span>{
            <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- 第二步 创建一个容器用来承载图表 指定其大小--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- 第三步逻辑交互 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-comment">//图表配置项</span>
        <span class="hljs-keyword">var</span> options = {
            <span class="hljs-attr">chart</span>: {
                <span class="hljs-attr">type</span>: <span class="hljs-string">'bar'</span>                          <span class="hljs-comment">//指定图表的类型，默认是折线图（line）</span>
            },
            <span class="hljs-attr">credits</span>:{
                <span class="hljs-comment">//版权信息</span>
                <span class="hljs-attr">enabled</span>:<span class="hljs-literal">false</span> ,<span class="hljs-comment">//去除版权信息</span>
            },
            <span class="hljs-attr">title</span>: {
                <span class="hljs-attr">text</span>: <span class="hljs-string">'学习的天数'</span>                 <span class="hljs-comment">// 标题</span>
            },
            <span class="hljs-attr">xAxis</span>: {
                <span class="hljs-attr">categories</span>: [<span class="hljs-string">'Vue'</span>, <span class="hljs-string">'React'</span>, <span class="hljs-string">'node'</span>,<span class="hljs-string">'js'</span>]   <span class="hljs-comment">// x 轴分类</span>
            },
            <span class="hljs-attr">yAxis</span>: {
                <span class="hljs-attr">title</span>: {
                    <span class="hljs-attr">text</span>: <span class="hljs-string">'各学多少天'</span>                <span class="hljs-comment">// y 轴标题</span>
                }
            },
            <span class="hljs-attr">series</span>: [{   <span class="hljs-comment">//ajax返回的数据对象                            // 数据列</span>
                <span class="hljs-attr">name</span>: <span class="hljs-string">'小王'</span>,                        <span class="hljs-comment">// 数据列名</span>
                <span class="hljs-attr">data</span>: [<span class="hljs-number">12</span>, <span class="hljs-number">1</span>, <span class="hljs-number">6</span>,<span class="hljs-number">9</span>]                     <span class="hljs-comment">// 数据</span>
            }, {
                <span class="hljs-attr">name</span>: <span class="hljs-string">'大王'</span>,
                <span class="hljs-attr">data</span>: [<span class="hljs-number">5</span>, <span class="hljs-number">17</span>, <span class="hljs-number">13</span>,<span class="hljs-number">1</span>]
            }]
        };
        <span class="hljs-comment">//初始化图表函数</span>
        <span class="hljs-built_in">console</span>.log(Highcharts,<span class="hljs-string">'图表库'</span>);
        <span class="hljs-comment">//初始化图表 这个chart参数有两个，第一个是指定的容器，第二个是你的配置项</span>
        Highcharts.chart(<span class="hljs-string">'container'</span>,options)
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>


</div></code></pre>
<h2 id="2-echarts">2 ECharts</h2>
<h3 id="21-%E5%AE%98%E7%BD%91%E5%9C%B0%E5%9D%80">2.1 官网地址</h3>
<ul>
<li>http://echarts.apache.org/zh/index.html</li>
</ul>
<h3 id="22-%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85">2.2 下载安装</h3>
<blockquote>
<p>通过CDN的引入方式</p>
</blockquote>
<pre class="hljs"><code><div>    https://www.jsdelivr.com/package/npm/echarts
</div></code></pre>
<blockquote>
<p>通过下载本引入的方式</p>
</blockquote>
<pre class="hljs"><code><div>    https://echarts.apache.org/zh/download.html
</div></code></pre>
<blockquote>
<p>通过npm 安装</p>
</blockquote>
<pre class="hljs"><code><div>    npm install(i)  echarts

    + echarts@5.0.1
</div></code></pre>
<h3 id="23-%E5%9F%BA%E6%9C%AC%E5%BA%94%E7%94%A8">2.3 基本应用</h3>
<pre class="hljs"><code><div><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- 引入echart核心库 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../node_modules/echarts/dist/echarts.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
        <span class="hljs-selector-id">#container</span>{
            <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">700px</span>;
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- 创建一个容器 并指定其大小 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- 逻辑交互 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-built_in">console</span>.log(echarts,<span class="hljs-string">'图表库'</span>);
        <span class="hljs-comment">//初识话数据图表</span>
        <span class="hljs-keyword">let</span> mychart = echarts.init(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'container'</span>))
        <span class="hljs-comment">//设置配置项</span>
        <span class="hljs-keyword">let</span> options = {
            <span class="hljs-attr">title</span>: { <span class="hljs-comment">//标题相关的配置项</span>
                <span class="hljs-attr">text</span>: <span class="hljs-string">'销售的统计数据'</span>
            },
            <span class="hljs-attr">tooltip</span>: {},
            <span class="hljs-attr">legend</span>: { <span class="hljs-comment">//图例 它必须要和数据列中的name属性一致</span>
                <span class="hljs-attr">data</span>:[<span class="hljs-string">'卖袜子'</span>]
            },
            <span class="hljs-attr">xAxis</span>: {
                <span class="hljs-attr">data</span>: [<span class="hljs-string">"衬衫"</span>,<span class="hljs-string">"羊毛衫"</span>,<span class="hljs-string">"雪纺衫"</span>,<span class="hljs-string">"裤子"</span>,<span class="hljs-string">"高跟鞋"</span>,<span class="hljs-string">"袜子"</span>]
            },
            <span class="hljs-attr">yAxis</span>: {},
            <span class="hljs-attr">series</span>: [{ <span class="hljs-comment">//数据列</span>
                <span class="hljs-attr">name</span>: <span class="hljs-string">'卖袜子'</span>,
                <span class="hljs-attr">type</span>: <span class="hljs-string">'bar'</span>,  <span class="hljs-comment">//柱状图</span>
                <span class="hljs-attr">data</span>: [<span class="hljs-number">5</span>, <span class="hljs-number">20</span>, <span class="hljs-number">36</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">20</span>]
            }]
        }
        <span class="hljs-comment">//在初始化之后的echart中设置配置</span>
        mychart.setOption(options)
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>

</div></code></pre>
<h3 id="24-%E5%A6%82%E4%BD%95%E5%9C%A8%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%AD%E5%BC%95%E5%85%A5echarts">2.4 如何在脚手架中引入Echarts</h3>
<h4 id="241-%E5%B1%80%E9%83%A8%E5%BC%95%E5%85%A5">2.4.1 局部引入</h4>
<pre class="hljs"><code><div>    &lt;template&gt;
    &lt;div&gt;
        &lt;!-- 设定一个容器并指定其大小 --&gt;
        &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
    //echarts5.x版本不支持import方法 
    // 选择最原始的方式 通过 require 引入
    let echart = require('echarts')
    export default {
    data() {
        return {};
    },
    mounted() {
        //组件一加载就调用echarts数据图表
        //初始化
        let myChart = echart.init(document.getElementById(&quot;container&quot;));

        //初始化配置项
        let options = {
        xAxis: {
            //横轴
            //&quot;Error: Component xAxis.分类 not exists. Load it first.&quot;
            //category
            type: &quot;category&quot;,
            data: [&quot;星期一&quot;, &quot;星期二&quot;, &quot;星期三&quot;, &quot;星期四&quot;, &quot;星期五&quot;, &quot;星期六&quot;, &quot;放假&quot;]
        },
        yAxis: {
            //纵轴
            type: &quot;value&quot;
        },
        series: [
            {
            //数据列
            data: [12, 44, 66, 199, 255, 16, 1],
            type: &quot;line&quot;
            }
        ]
        };
        //给图表设置配置项
        myChart.setOption(options);
    }
    };
    &lt;/script&gt;

    &lt;style lang=&quot;&quot; scoped&gt;
    #container {
    width: 700px;
    height: 500px;
    }
    &lt;/style&gt;

</div></code></pre>
<h4 id="242-%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A5">2.4.2 全局引入</h4>
<blockquote>
<p>main.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//全局引入echarts</span>
    <span class="hljs-keyword">let</span> Echarts = <span class="hljs-built_in">require</span>(<span class="hljs-string">'echarts'</span>)
    Vue.prototype.$Echarts = Echarts
</div></code></pre>
<h1 id="%E7%AC%AC%E5%8D%81%E4%BA%94%E5%A4%A9">第十五天</h1>
<h2 id="1-git">1 Git</h2>
<h3 id="11-%E6%A6%82%E5%BF%B5">1.1 概念</h3>
<pre class="hljs"><code><div>    代码版本管理工具

    以前没有git之前，我们用什么去管理我们的代码呢？？？
    svn（小乌龟）公司内部局域网，一般到公司之后，都由你的领导或者运维人员发配账号给你，开发哪个项目就有哪个项目的权限
</div></code></pre>
<h3 id="12-github%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93">1.2 GitHub（远程仓库）</h3>
<pre class="hljs"><code><div>    为全世界开发者而创建的平台，所有的项目和源码都是开源的，希望你成为你贡献的一部分
    https://github.com/

    首要先要在github上面注册账号。
    邮箱：一定是常用的邮箱，有可能会随时发验证码给你

</div></code></pre>
<h3 id="13-%E4%B8%8B%E8%BD%BD%E5%B9%B6%E5%AE%89%E8%A3%85git">1.3 下载并安装git</h3>
<pre class="hljs"><code><div>    https://git-scm.com/download/win

    鼠标右键看到git Bash here 就是安装成功
    打开git的命令窗口，鼠标右键git Bash here

</div></code></pre>
<h3 id="14-git%E4%B8%80%E4%BA%9B%E5%9F%BA%E6%9C%AC%E5%91%BD%E4%BB%A4">1.4 git一些基本命令</h3>
<pre class="hljs"><code><div>    pwd 当前目录
    ls 当前目录下的文件集合
    ll 当前目录下详细的文件集合
    git init初始化，生成.git文件（暂缓区）
    git add .  添加所有文件和文件夹
    git add * 添加所有文件和文件夹
    git add *.html 添加一类文件
    git add home.vue 添加一个文件
    git status 查看git状态 
    git --version  git 软件的版本
    git config (git提供给我们的环境配置工具) 
    第一次创建账号时要设置一下邮箱和名字，如果已经有了再设置就是修改
    git config --global useremail ''
    git config --global userename ''
    git config --list (查看设置环境的列表)
    git branch  (查看分支)
    master 就是默认是分支
    git branch dev001(举例)分支名称  创建分支。第一次创建会把之前默认分支内容复制过来。如果你要在新分支上创建内容，要记得提交
    git checkout 分支名称 切换
    git branch -D 分支名称 删除分支
    git merge(合并) 分支名称  把你想要合并内容加进来
    ========================
    回退版本如何操作

    查看log日志
    git log 
    查看所有版本
    git reflog  1161385(类似于这样的就是版本号，前7个黄色数字)
    回退版本
    git reset --hard HEAD^ 回退一个版本
    git reset --hard HEAD^^ 回退俩个版本
    git reset --hard 版本号（1161385）  切换版本


    ====================================
    branch 分支 
    master (默认分支)
    真正在做项目的过程中可能会有N个分支，
    一、在上线之前，我们会打包N版，经过N次测试。如果说你不做版本控制，那么代码可能会再现上一次修改好的bug 。一般都封板。下一次再开一个新分支，所有人本地的代码都要切换到新分支

</div></code></pre>
<h3 id="15-%E5%88%9B%E5%BB%BA%E6%96%B0%E4%BB%93%E5%BA%93%E7%9A%84%E6%93%8D%E4%BD%9C%E6%B5%81%E7%A8%8B">1.5 创建新仓库的操作流程</h3>
<h4 id="151-%E7%99%BB%E5%BD%95github%E5%88%9B%E5%BB%BA%E6%96%B0%E4%BB%93%E5%BA%93">1.5.1 登录github创建新仓库</h4>
<pre class="hljs"><code><div>    在登录成功网页的右上角，
    创建仓库名称
    创建该仓库的描述
    选择是否公有
    创建就可以了（不用选择优先创建readme）
</div></code></pre>
<h4 id="152-%E6%8A%8A%E6%9C%AC%E5%9C%B0%E9%A1%B9%E7%9B%AE%E6%8E%A8%E9%80%81%E5%88%B0%E8%BF%9C%E7%A8%8B%E6%96%B0%E4%BB%93%E5%BA%93nodemodules%E4%B8%8D%E8%83%BD%E4%BC%A0">1.5.2 把本地项目推送到远程新仓库（node_modules不能传）</h4>
<pre class="hljs"><code><div>    在项目目录下，右键，git Bash here
    一、初始化git命令 git init
    二、添加你要上传的文件 git add .(传输所有文件以及目录，如果是空文件最后不会上传成功)
    三、添加上传文件日志 git commit -m  '备注信息'
    四、链接远程仓库 git remote add origin https://github.com/账号
    五、把暂缓区内容推送到链接地址 git push -u origin master
</div></code></pre>
<h4 id="153-%E8%BF%9B%E5%85%A5%E5%85%AC%E5%8F%B8%E7%9A%84%E7%AC%AC%E4%B8%80%E5%A4%A9%E7%AC%AC%E4%B8%80%E6%AC%A1%E4%B8%8B%E8%BD%BD%E9%A1%B9%E7%9B%AE">1.5.3 进入公司的第一天（第一次下载项目）</h4>
<pre class="hljs"><code><div>    在项目目录下，右键，git Bash here
    git clone https://github.com/账号(给你的项目地址)

</div></code></pre>
<h4 id="154-%E4%B8%8B%E7%8F%AD%E4%B9%8B%E5%89%8D%E4%B8%80%E5%AE%9A%E8%A6%81%E8%AE%B0%E5%BE%97%E6%9B%B4%E6%96%B0%E4%BB%A3%E7%A0%81-%E5%B9%B6%E6%8F%90%E4%BA%A4">1.5.4 下班之前一定要记得更新代码 并提交</h4>
<pre class="hljs"><code><div>    git pull 把远程仓库的内容更新拉取到本地
    Already up to date. 代表当前目录下所有都是最新的
    git add 添加你更新的文件
    git commit -m '输入当前日志'
    git push

</div></code></pre>
<h4 id="155-%E4%B8%8A%E7%8F%AD%E4%B9%8B%E5%89%8D">1.5.5 上班之前</h4>
<pre class="hljs"><code><div>    从远程仓库拉取代码
    git pull 拉取
</div></code></pre>
<h3 id="16-%E6%8F%90%E4%BA%A4%E4%BB%A3%E7%A0%81%E5%87%BA%E7%8E%B0%E5%86%B2%E7%AA%81%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3">1.6 提交代码出现冲突，如何解决</h3>
<pre class="hljs"><code><div>    一、如果官方没有出现新的要覆盖的文件
    把本地文件备份，然后更新最新，再去手动 merge去比较差异更新
    二、官方自动把差异性文件覆盖到了本地 让你选择，你可以选择覆盖或者修改

</div></code></pre>
<h2 id="2-%E5%9B%BE%E5%BD%A2%E5%8C%96git%E6%93%8D%E4%BD%9C">2 图形化Git操作</h2>
<h3 id="21-sourcetree">2.1 sourcetree</h3>
<pre class="hljs"><code><div>    https://www.sourcetreeapp.com/
</div></code></pre>
<h3 id="22-tortoisegit-64%E4%BD%8D">2.2 TortoiseGit 64位</h3>
<h3 id="23-vscode%E5%86%85%E7%BD%AE%E9%9B%86%E6%88%90git%E6%8F%92%E4%BB%B6">2.3 vsCode内置集成git插件</h3>
<pre class="hljs"><code><div>    你可以直接去操作，拉取，克隆，提交，合并。。。功能
</div></code></pre>
<h2 id="3-ssr%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93">3 ssr(服务端渲染)</h2>
<h3 id="31-%E6%A6%82%E5%BF%B5">3.1 概念</h3>
<pre class="hljs"><code><div>    Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记&quot;激活&quot;为客户端上完全可交互的应用程序。

</div></code></pre>
<h3 id="32-%E4%BC%98%E7%BC%BA%E7%82%B9">3.2 优缺点</h3>
<pre class="hljs"><code><div>    优点
    * 提高运行速率
    * 利于SEO的优化

    缺点
    * 只能在Node.js服务器运行（node本身合一搭建服务器）
    * 一些VUE中特殊的语法和函数不能在服务端应用
</div></code></pre>
<h3 id="33-%E4%B8%8B%E8%BD%BD%E5%B9%B6%E5%AE%89%E8%A3%85">3.3 下载并安装</h3>
<ul>
<li>npm install vue vue-server-renderer</li>
</ul>
<h3 id="34-%E6%90%AD%E5%BB%BAnode%E6%9C%8D%E5%8A%A1%E5%99%A8">3.4 搭建node服务器</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">//引入express框架</span>
    <span class="hljs-keyword">let</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>)
    <span class="hljs-comment">//调用express方法</span>
    <span class="hljs-keyword">let</span> app  = express() 

    <span class="hljs-comment">//设置.get方式</span>
    app.get(<span class="hljs-string">'/'</span>,(req,res)=&gt;{
        <span class="hljs-comment">//打印出响应结果</span>
        res.send(<span class="hljs-string">'哈哈哈哈 进来了'</span>)
    })

    <span class="hljs-comment">//设置监听</span>
    app.listen(<span class="hljs-number">4200</span>,()=&gt;{
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'=========服务器正在运行======='</span>);
    })
</div></code></pre>
<h3 id="35-%E5%88%9B%E5%BB%BA%E6%A8%A1%E6%9D%BF%E5%B9%B6%E7%BB%93%E5%90%88%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%B8%B2%E6%9F%93">3.5 创建模板，并结合服务器渲染</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">//引入express框架</span>
    <span class="hljs-keyword">let</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">"express"</span>);
    <span class="hljs-comment">//调用express方法</span>
    <span class="hljs-keyword">let</span> app = express();

    <span class="hljs-comment">//引入vue的核心库</span>
    <span class="hljs-keyword">let</span> Vue = <span class="hljs-built_in">require</span>(<span class="hljs-string">"vue"</span>);
    <span class="hljs-keyword">let</span> vm = <span class="hljs-keyword">new</span> Vue({
    <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">msg</span>: <span class="hljs-string">"这是一个服务端渲染"</span>,
        <span class="hljs-attr">newsList</span>:[
            {
                <span class="hljs-attr">id</span>:<span class="hljs-number">1</span>,
                <span class="hljs-attr">title</span>:<span class="hljs-string">'返乡必须居家隔离14天'</span>
            },
            {
                <span class="hljs-attr">id</span>:<span class="hljs-number">2</span>,
                <span class="hljs-attr">title</span>:<span class="hljs-string">'要求不聚集，只能好好学习'</span>
            },
        ]
    },
    <span class="hljs-attr">template</span>: <span class="hljs-string">"&lt;div&gt;{{msg}}&lt;ul&gt;&lt;li v-for='item in newsList' :key='item.id'&gt;{{item.title}}&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;"</span>,
    });

    <span class="hljs-comment">//创建一个模板字符串</span>
    <span class="hljs-keyword">let</span> rendInfo = <span class="hljs-built_in">require</span>(<span class="hljs-string">"vue-server-renderer"</span>).createRenderer();
    <span class="hljs-comment">//调用转化字符串的方法</span>
    rendInfo.renderToString(vm, (err, html) =&gt; {
    <span class="hljs-keyword">if</span> (err) {
        <span class="hljs-keyword">throw</span> err;
    }

    <span class="hljs-comment">//设置.get方式</span>
    app.get(<span class="hljs-string">"/"</span>, (req, res) =&gt; {
        <span class="hljs-comment">//打印出响应结果</span>
        res.send(html);
    });
    });

    <span class="hljs-built_in">console</span>.log(rendInfo, <span class="hljs-string">"who"</span>);

    <span class="hljs-comment">//设置监听</span>
    app.listen(<span class="hljs-number">4200</span>, () =&gt; {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"=========服务器正在运行======="</span>);
    });

</div></code></pre>
<h3 id="36-%E4%B8%8B%E8%BD%BDnuxt-%E6%8F%92%E4%BB%B6">3.6 下载Nuxt 插件</h3>
<pre class="hljs"><code><div>npx create-nuxt-app

    注意点：一定要在空目录下去创建项目

    如何创建路由组件（大部分用法和Vue很相似）
    一级路由创建
    在pages下面创建文件夹
    home /index.vue   这就是一级路由。如果你想渲染一级路由，记得重启 

</div></code></pre>
<h2 id="4-tstypescript">4 TS(typescript)</h2>
<h3 id="41-%E6%A6%82%E5%BF%B5">4.1 概念</h3>
<pre class="hljs"><code><div>    ts（微软开发）
    typeScript 简写 
    它叫做js超集，它包含了js所有属性和方法，在它的基础上增加了数据类型定义。它被看成是ECMAScript 为了的标准
    主要用于大型的项目，是你的定义更加的标准
    ts可以编译成js，最终以js的方式运行

    Angular从2.0开始就已经用ts 。这就是谷歌与微软完美的结合
</div></code></pre>
<h3 id="42-%E5%AE%89%E8%A3%85">4.2 安装</h3>
<ul>
<li>npm install -g typescript</li>
</ul>
<h3 id="43-%E8%BF%90%E8%A1%8Cts%E6%96%87%E4%BB%B6">4.3 运行ts文件</h3>
<blockquote>
<p>手动运行</p>
</blockquote>
<ul>
<li>tsc 文件名</li>
</ul>
<pre class="hljs"><code><div>
    tsc index.ts
</div></code></pre>
<blockquote>
<p>通过监听器去监听文件的变化</p>
</blockquote>
<pre class="hljs"><code><div>    一、初始化生成tsConfig.json
    tsc --init
    二、借助于vscode，在终端上点击运行生成任务=&gt;监视

    有的同学的电脑 powerShell 运行的过程会出错
    打开powershell 执行：set-ExecutionPolicy RemoteSigned
</div></code></pre>
<blockquote>
<p>tsconfig</p>
</blockquote>
<pre class="hljs"><code><div>    释放出
    &quot;outDir&quot;: &quot;./dist&quot;,    //修改成为你想要输出的目录地址
</div></code></pre>
<blockquote>
<p>配置文件解析</p>
</blockquote>
<pre class="hljs"><code><div>  {
  <span class="hljs-attr">"compilerOptions"</span>: {
      <span class="hljs-comment">/* 基本选项 */</span>
      <span class="hljs-attr">"target"</span>: <span class="hljs-string">"es5"</span>,<span class="hljs-comment">// 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'</span>
      <span class="hljs-attr">"module"</span>: <span class="hljs-string">"commonjs"</span>,<span class="hljs-comment">// 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'</span>
      <span class="hljs-attr">"lib"</span>: [],<span class="hljs-comment">// 指定要包含在编译中的库文件</span>
      <span class="hljs-attr">"allowJs"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//允许编译 javascript 文件</span>
      <span class="hljs-attr">"checkJs"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//报告javascript文件中的错误</span>
      <span class="hljs-attr">"jsx"</span>: <span class="hljs-string">"preserve"</span>,<span class="hljs-comment">//指定jsx代码的生成: 'preserve', 'react-native', or 'react'</span>
      <span class="hljs-attr">"declaration"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//生成相应的 '.d.ts' 文件</span>
      <span class="hljs-attr">"sourceMap"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">//生成相应的 '.map' 文件</span>
      <span class="hljs-attr">"outFile"</span>: <span class="hljs-string">"./"</span>,<span class="hljs-comment">//将输出文件合并为一个文件</span>
      <span class="hljs-attr">"outDir"</span>: <span class="hljs-string">"./"</span>,<span class="hljs-comment">//指定输出目录</span>
      <span class="hljs-attr">"rootDir"</span>: <span class="hljs-string">"./"</span>,<span class="hljs-comment">//用来控制输出目录结构 --outDir.</span>
      <span class="hljs-attr">"removeComments"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//删除编译后的所有的注释</span>
      <span class="hljs-attr">"noEmit"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//不生成输出文件</span>
      <span class="hljs-attr">"importHelpers"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//从tslib导入辅助工具函数</span>
      <span class="hljs-attr">"isolatedModules"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//将每个文件做为单独的模块（与 'ts.transpileModule' 类似）.</span>
      <span class="hljs-comment">/* 严格的类型检查选项 */</span>
      <span class="hljs-attr">"strict"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//启用所有严格类型检查选项</span>
      <span class="hljs-attr">"noImplicitAny"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//在表达式和声明上有隐含的any类型时报错</span>
      <span class="hljs-attr">"strictNullChecks"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//启用严格的null检查</span>
      <span class="hljs-attr">"noImplicitThis"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//当this表达式值为 any 类型的时候，生成一个错误</span>
      <span class="hljs-attr">"alwaysStrict"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//以严格模式检查每个模块，并在每个文件里加入 'use strict'</span>
      <span class="hljs-comment">/* 额外的检查 */</span>
      <span class="hljs-attr">"noUnusedLocals"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//有未使用的变量时，抛出错误</span>
      <span class="hljs-attr">"noUnusedParameters"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//有未使用的参数时，抛出错误</span>
      <span class="hljs-attr">"noImplicitReturns"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//并不是所有函数里的代码都有返回值时，抛出错误</span>
      <span class="hljs-attr">"noFallthroughCasesInSwitch"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//报告switch语句的fallthrough错误。</span>
      <span class="hljs-comment">/* 模块解析选项 */</span>
      <span class="hljs-attr">"moduleResolution"</span>: <span class="hljs-string">"node"</span>,<span class="hljs-comment">//选择模块解析策略：'node' (Node.js) or 'classic' (TypeScript pre-1.6)</span>
      <span class="hljs-attr">"baseUrl"</span>: <span class="hljs-string">"./"</span>,<span class="hljs-comment">//用于解析非相对模块名称的基目录</span>
      <span class="hljs-attr">"paths"</span>: {},<span class="hljs-comment">//模块名到基于 baseUrl 的路径映射的列表</span>
      <span class="hljs-attr">"rootDirs"</span>: [],<span class="hljs-comment">//根文件夹列表，其组合内容表示项目运行时的结构内容</span>
      <span class="hljs-attr">"typeRoots"</span>: [],<span class="hljs-comment">//包含类型声明的文件列表</span>
      <span class="hljs-attr">"types"</span>: [],<span class="hljs-comment">//需要包含的类型声明文件名列表</span>
      <span class="hljs-attr">"allowSyntheticDefaultImports"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">//允许从没有设置默认导出的模块中默认导入。</span>
      <span class="hljs-comment">/* Source Map Options */</span>
      <span class="hljs-attr">"sourceRoot"</span>: <span class="hljs-string">"./"</span>,<span class="hljs-comment">//指定调试器应该找到 TypeScript 文件而不是源文件的位置</span>
      <span class="hljs-attr">"mapRoot"</span>: <span class="hljs-string">"./"</span>,<span class="hljs-comment">//指定调试器应该找到映射文件而不是生成文件的位置</span>
      <span class="hljs-attr">"inlineSourceMap"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件</span>
      <span class="hljs-attr">"inlineSources"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性</span>
      <span class="hljs-comment">/* 其他选项 */</span>
      <span class="hljs-attr">"experimentalDecorators"</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//启用装饰器</span>
      <span class="hljs-attr">"emitDecoratorMetadata"</span>: <span class="hljs-literal">true</span><span class="hljs-comment">//为装饰器提供元数据的支持</span>
    }
  }
</div></code></pre>
<h1 id="%E7%AC%AC%E5%8D%81%E5%85%AD%E5%A4%A9">第十六天</h1>
<h2 id="1-ts%E5%9F%BA%E6%9C%AC%E7%9F%A5%E8%AF%86">1 ts基本知识</h2>
<h3 id="11-%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85ts">1.1 全局安装ts</h3>
<ul>
<li>npm install(i) -g typescript</li>
</ul>
<h3 id="12-%E6%A6%82%E5%BF%B5">1.2 概念</h3>
<ul>
<li>ts就是js超级，它包含了js所有的语法和内容，在它的基础上增加了类型定义。</li>
<li>它是在编译的过程中进行类型验证，而不是在运行的过程中检验类型</li>
<li>ts它是来源于js，并编译成js去运行。</li>
<li>它们都是弱类型语言</li>
<li>它是微软开发的。</li>
<li>angular是2.0版本开始结合ts创建的全端框架</li>
<li>react的脚手架会与ts进行结合</li>
<li>vue3.0(核心库) 利用ts进行开发的</li>
<li>它未来会成为ECMAscript的定义标准</li>
</ul>
<h3 id="13-%E8%BF%90%E8%A1%8Cts%E6%96%87%E4%BB%B6">1.3 运行ts文件</h3>
<ul>
<li>tsc 文件名（手动编译比较麻烦）</li>
<li>利用vscode的监听任务 首先要先生成tsconfig.json文件</li>
</ul>
<h3 id="14-%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%AE%9A%E4%B9%89">1.4 基本数据类型的定义</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">//基本数据类型</span>
    <span class="hljs-keyword">let</span> num:<span class="hljs-built_in">Number</span> = <span class="hljs-number">100</span>

    num = <span class="hljs-number">500</span>

    <span class="hljs-built_in">console</span>.log(num,<span class="hljs-string">'数量'</span>);

    <span class="hljs-comment">// 字符串</span>
    <span class="hljs-keyword">let</span> msg:<span class="hljs-built_in">String</span> =<span class="hljs-string">'直播ts'</span>
    msg =<span class="hljs-string">"9"</span>
    <span class="hljs-comment">//布尔</span>
    <span class="hljs-keyword">let</span> flag:<span class="hljs-built_in">Boolean</span> = <span class="hljs-literal">true</span> 
    flag = <span class="hljs-literal">false</span>

    <span class="hljs-comment">//对象</span>
    <span class="hljs-keyword">let</span> obj:object = {
        name:<span class="hljs-string">'小王'</span>,
        age:<span class="hljs-number">90</span>
    }

    <span class="hljs-comment">//数组</span>
    <span class="hljs-keyword">let</span> arr:[] = [] 
    <span class="hljs-keyword">let</span> arr1:<span class="hljs-built_in">Array</span>&lt;<span class="hljs-built_in">String</span>&gt; = [<span class="hljs-string">"1"</span>,<span class="hljs-string">"2"</span>,<span class="hljs-string">"3"</span>]

    <span class="hljs-comment">//元组 给数组中的每一项都定义成不同的数据类型，要求，赋值过程中每一个都是按照定义类型赋值</span>
    <span class="hljs-keyword">let</span> arr2:[<span class="hljs-built_in">number</span>,<span class="hljs-built_in">string</span>,<span class="hljs-built_in">boolean</span>,object] = [<span class="hljs-number">4</span>,<span class="hljs-string">'小白'</span>,<span class="hljs-literal">true</span>,{name:<span class="hljs-string">'小李'</span>}] 

    <span class="hljs-comment">//any 这个类型会有所谓的弊端，那就是和js没什么区别</span>
    <span class="hljs-keyword">let</span> dataList:<span class="hljs-built_in">any</span>  = <span class="hljs-number">0</span>
    <span class="hljs-comment">//枚举 在项目过程中用的比较多</span>
    <span class="hljs-comment">//定义了一个性别的枚举类型</span>
    <span class="hljs-comment">//后端在要求前端传一些状态的时候，要求传类型。比如：性别：男和女 0和1 .比如货品状态：未支付，1已支付，2未发货，3未收货，4已签收5。。。。</span>
    <span class="hljs-comment">//默认状态从0开始</span>
    <span class="hljs-keyword">enum</span> Sex{
        man,woman
    }
    <span class="hljs-built_in">console</span>.log(Sex,<span class="hljs-string">'性别'</span>);
    <span class="hljs-built_in">console</span>.log(Sex.man);
    <span class="hljs-built_in">console</span>.log(Sex.woman);
    <span class="hljs-keyword">enum</span> MethodInfo{
        GET=<span class="hljs-string">'get'</span>,POST=<span class="hljs-string">'post'</span>
    }

    <span class="hljs-comment">//后端要求用getvalue值</span>
    <span class="hljs-keyword">let</span> getInfo:MethodInfo = MethodInfo.GET
    <span class="hljs-built_in">console</span>.log(getInfo,<span class="hljs-string">'getInfo'</span>);

    <span class="hljs-comment">//undefined </span>
    <span class="hljs-comment">//声明变量，不想赋值，那么可以初始定义undefined类型</span>
    <span class="hljs-keyword">let</span> num1:<span class="hljs-built_in">Number</span>|<span class="hljs-literal">undefined</span> 
    <span class="hljs-built_in">console</span>.log(num1,<span class="hljs-string">'num1'</span>);

    <span class="hljs-comment">//void 返回值为空</span>
    <span class="hljs-comment">//函数</span>
    <span class="hljs-comment">//在ts中定义函数，一定要定义函数的返回值类型</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn1</span>(<span class="hljs-params"></span>):<span class="hljs-title">void</span></span>{
        <span class="hljs-comment">//return 100  不能有返回值</span>
    }
</div></code></pre>
<h3 id="15-%E5%87%BD%E6%95%B0%E7%9A%84%E5%AE%9A%E4%B9%89%E4%BD%BF%E7%94%A8">1.5 函数的定义使用</h3>
<blockquote>
<p>返回值</p>
</blockquote>
<ul>
<li>函数必须定义返回值类型（不定也报错），返回类型，没有返回值的时候，我们可以利用：void,any 。有返回值，返回值是什么类型就定义什么类型</li>
</ul>
<blockquote>
<p>参数</p>
</blockquote>
<h3 id="16-%E5%8F%82%E6%95%B0">1.6 参数</h3>
<blockquote>
<p>如果有传参，必须要定义参数的数据类型</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params">msg:<span class="hljs-built_in">string</span></span>):<span class="hljs-title">void</span></span>{

    }
    fn(<span class="hljs-string">'字符串'</span>)
</div></code></pre>
<blockquote>
<p>默认参数</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//默认参数</span>
    <span class="hljs-comment">//执行函数没有传参，那么肯定是undefined ，这个时候我们可以定义一个默认参数。如果有了默认参数，那么不传参直接执行默认参数，传参就执行传参的内容</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">stop</span>(<span class="hljs-params">name:<span class="hljs-built_in">String</span>,msg:<span class="hljs-built_in">String</span>='cry'</span>):<span class="hljs-title">string</span></span>{
        <span class="hljs-comment">// return "跑"</span>
        <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${name}</span><span class="hljs-subst">${msg}</span>`</span>
    }
    <span class="hljs-comment">//stop('小黄','停止运行')</span>
    stop(<span class="hljs-string">'小黄'</span>)
    <span class="hljs-built_in">console</span>.log(stop(<span class="hljs-string">'小黄'</span>,<span class="hljs-string">'笑了'</span>),<span class="hljs-string">'第二个函数'</span>);
</div></code></pre>
<blockquote>
<p>可选参数</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//可选参数 这个参数可传可不传</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sleep</span>(<span class="hljs-params">name:<span class="hljs-built_in">String</span>,age?:<span class="hljs-built_in">Number</span></span>):<span class="hljs-title">void</span></span>{
        <span class="hljs-built_in">console</span>.log(name,<span class="hljs-string">'第一个参数'</span>);
        <span class="hljs-built_in">console</span>.log(age,<span class="hljs-string">'第二个参数'</span>);        
    }
    sleep(<span class="hljs-string">'小李'</span>,<span class="hljs-number">100</span>)
</div></code></pre>
<h3 id="17-%E7%B1%BB%E7%9A%84%E5%88%9B%E5%BB%BA">1.7 类的创建</h3>
<h4 id="171-%E5%9F%BA%E6%9C%AC%E7%B1%BB">1.7.1 基本类</h4>
<pre class="hljs"><code><div><span class="hljs-comment">//定义一个基本类</span>
<span class="hljs-keyword">class</span> Zoon {
    <span class="hljs-comment">//类的作用域省略了声明方式</span>
    name: <span class="hljs-built_in">String</span>
    age: <span class="hljs-built_in">Number</span>
    <span class="hljs-comment">//创建构造函数</span>
    <span class="hljs-keyword">constructor</span>(<span class="hljs-params">info: <span class="hljs-built_in">String</span></span>) {
        <span class="hljs-comment">//初始化定义name值</span>
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>);
        <span class="hljs-comment">//调用类把内容赋值给name</span>
        <span class="hljs-keyword">this</span>.name = info
        <span class="hljs-keyword">this</span>.age = <span class="hljs-number">10</span>
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name, <span class="hljs-string">'名字'</span>);
    }
    <span class="hljs-comment">//定义函数</span>
    eat(food: <span class="hljs-built_in">String</span>): <span class="hljs-built_in">String</span> {
        <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span>吃<span class="hljs-subst">${food}</span>`</span>
    }
}

<span class="hljs-comment">//调用类</span>
<span class="hljs-keyword">let</span> z = <span class="hljs-keyword">new</span> Zoon(<span class="hljs-string">'狮子'</span>)
<span class="hljs-built_in">console</span>.log(z.eat(<span class="hljs-string">'肉'</span>), <span class="hljs-string">'执行eat'</span>);
<span class="hljs-built_in">console</span>.log(z, <span class="hljs-string">'实例化的结果'</span>);

</div></code></pre>
<h4 id="172-%E6%B4%BE%E7%94%9F%E7%B1%BB%E5%AD%90%E7%B1%BB%E7%B1%BB%E7%9A%84%E7%BB%A7%E6%89%BF">1.7.2 派生类（子类，类的继承）</h4>
<pre class="hljs"><code><div>    <span class="hljs-comment">//如何定义子类 会继承父类的所有属性和方法</span>
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Dog</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Zoon</span></span>{
        <span class="hljs-keyword">constructor</span>(info:String){
            <span class="hljs-comment">//创建子类，子类可以继承父类的所有属性和方法，但是在初始化构造函数时，必须要利用super() 去调用父类的属性和方法</span>
            <span class="hljs-comment">//在子类中如果想要调用父类的函数，那么就用super.调用函数名</span>
            <span class="hljs-comment">//如果子类想要重构父类的函数方法，那么指定在子类中重新定义同名函数体</span>
            <span class="hljs-keyword">super</span>(info)
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>,<span class="hljs-string">'指的是子类的作用域'</span>);
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.age,<span class="hljs-string">'父类的age'</span>);
            
            <span class="hljs-comment">//在子类中调用eat函数</span>
            <span class="hljs-built_in">console</span>.log( <span class="hljs-keyword">super</span>.eat(<span class="hljs-string">'骨头'</span>),<span class="hljs-string">'调用父类函数'</span>); 
        }    
        <span class="hljs-comment">//创建一个eat函数</span>
        eat(foodInfo:string):<span class="hljs-built_in">String</span>{
            <span class="hljs-keyword">return</span> <span class="hljs-string">`哈哈哈哈<span class="hljs-subst">${foodInfo}</span>`</span>
        }
    }
    <span class="hljs-comment">//实例化子类</span>
    <span class="hljs-keyword">let</span> dog = <span class="hljs-keyword">new</span> Dog(<span class="hljs-string">'二哈'</span>)
    <span class="hljs-built_in">console</span>.log(dog.eat(<span class="hljs-string">'吃肉'</span>),<span class="hljs-string">'子类实例化调用函数！！！'</span>);


</div></code></pre>
<h3 id="18-%E7%B1%BB%E7%9A%84%E4%BF%AE%E9%A5%B0">1.8 类的修饰</h3>
<h4 id="181-%E4%BF%AE%E9%A5%B0%E7%B1%BB%E4%B8%AD%E7%9A%84%E5%B1%9E%E6%80%A7">1.8.1 修饰类中的属性</h4>
<pre class="hljs"><code><div>    <span class="hljs-comment">//类的一些修饰</span>
    <span class="hljs-comment">//类的基本修饰 public 公有的   private 私有的   protected受保护的</span>
    <span class="hljs-comment">//创建一个基本类</span>
    <span class="hljs-comment">//当前定义的属性是公有变量，那么父类、子类、以及类的外部都可以调用这个属性</span>
    <span class="hljs-comment">//当前 如果定义了一个私有类属性，那么这个属性只能在父类中被调用，子类和类的外部都不能使用</span>
    <span class="hljs-comment">//当前 如果定义了一个受保护的属性，那么这个属性可以在父类中被调用（本身类），也可以在子类中被调用，但是不能在类的外部调用</span>
</div></code></pre>
<blockquote>
<p>public 公有的 (可省略)</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Zoom</span> </span>{
        <span class="hljs-comment">//公有变量</span>
        public name:<span class="hljs-built_in">String</span>
        <span class="hljs-keyword">constructor</span>(){
            <span class="hljs-comment">//构造函数</span>
            <span class="hljs-comment">//针对于name 进行初始化</span>
            <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'动物园'</span>
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name,<span class="hljs-string">'父类中调用'</span>);
            
        }
    }
    <span class="hljs-comment">//创建一个子类去继承父类的所有属性和方法</span>
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Lion</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Zoom</span></span>{
        <span class="hljs-keyword">constructor</span>(){
            <span class="hljs-keyword">super</span>() 
            <span class="hljs-comment">//利用super() 这个方法去调用父类的属性和方法</span>
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name,<span class="hljs-string">'子类中调用'</span>);
            
        }
    }

    <span class="hljs-comment">//实例化子类</span>
    <span class="hljs-keyword">let</span> lion = <span class="hljs-keyword">new</span> Lion() 
    <span class="hljs-comment">//类的外层调用name属性</span>
    <span class="hljs-built_in">console</span>.log(lion.name,<span class="hljs-string">'调用name....'</span>);
    <span class="hljs-built_in">console</span>.log(lion,<span class="hljs-string">'子类的内容'</span>);

</div></code></pre>
<blockquote>
<p>private 私有的</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//私有的属性，只能用于本类，不能被子类以及外部调用</span>
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Zoom</span> </span>{
        private name:<span class="hljs-built_in">String</span>
        <span class="hljs-keyword">constructor</span>(){
            <span class="hljs-comment">//构造函数</span>
            <span class="hljs-comment">//针对于name 进行初始化</span>
            <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'动物园'</span>
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name,<span class="hljs-string">'父类中调用'</span>);
            
        }
    }
    <span class="hljs-comment">//创建一个子类去继承父类的所有属性和方法</span>

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Lion</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Zoom</span></span>{
        <span class="hljs-keyword">constructor</span>(){
            <span class="hljs-keyword">super</span>() 
            <span class="hljs-comment">//利用super() 这个方法去调用父类的属性和方法</span>
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name,<span class="hljs-string">'子类中调用'</span>);
            
        }
    }

    <span class="hljs-comment">//实例化子类</span>
    <span class="hljs-keyword">let</span> lion = <span class="hljs-keyword">new</span> Lion() 
    <span class="hljs-comment">//类的外层调用name属性</span>
    <span class="hljs-built_in">console</span>.log(lion.name,<span class="hljs-string">'调用name....'</span>);
    <span class="hljs-built_in">console</span>.log(lion,<span class="hljs-string">'子类的内容'</span>);

</div></code></pre>
<blockquote>
<p>protected 受保护的</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Zoom</span> </span>{
        protected name:<span class="hljs-built_in">String</span>
        <span class="hljs-keyword">constructor</span>(){
            <span class="hljs-comment">//构造函数</span>
            <span class="hljs-comment">//针对于name 进行初始化</span>
            <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'动物园'</span>
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name,<span class="hljs-string">'父类中调用'</span>);
            
        }
    }
    <span class="hljs-comment">//创建一个子类去继承父类的所有属性和方法</span>

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Lion</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Zoom</span></span>{
        <span class="hljs-keyword">constructor</span>(){
            <span class="hljs-keyword">super</span>() 
            <span class="hljs-comment">//利用super() 这个方法去调用父类的属性和方法</span>
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name,<span class="hljs-string">'子类中调用'</span>);
            
        }
    }

    <span class="hljs-comment">//实例化子类</span>
    <span class="hljs-keyword">let</span> lion = <span class="hljs-keyword">new</span> Lion() 
    <span class="hljs-comment">//类的外层调用name属性</span>
    <span class="hljs-built_in">console</span>.log(lion.name,<span class="hljs-string">'调用name....'</span>);
    <span class="hljs-built_in">console</span>.log(lion,<span class="hljs-string">'子类的内容'</span>);

</div></code></pre>
<h4 id="182-%E9%9D%99%E6%80%81%E7%B1%BB-static-%E5%B1%9E%E6%80%A7%E6%96%B9%E6%B3%95">1.8.2 静态类 static （属性/方法）</h4>
<ul>
<li>静态类不需要被实例化。你 想要调用静态类的属性或者方法。可直接.属性 或者.方法名</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">staticDemo</span></span>{
        <span class="hljs-comment">//属相</span>
        <span class="hljs-keyword">static</span> username:string = <span class="hljs-string">'老王'</span>
        <span class="hljs-comment">//方法</span>
        <span class="hljs-comment">//时间的转化函数</span>
        <span class="hljs-comment">//new Date().getTime() 取出当前的时间戳</span>
        <span class="hljs-comment">//1611631335165</span>
        <span class="hljs-keyword">static</span> getNowTime(timer:any):any{
            <span class="hljs-built_in">console</span>.log(timer,<span class="hljs-string">'当前时间戳'</span>);
            <span class="hljs-keyword">return</span> <span class="hljs-string">`当前时间是。。。<span class="hljs-subst">${<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(timer).toLocaleTimeString()}</span>`</span>
        }
    }

    <span class="hljs-keyword">let</span> s = staticDemo 
    <span class="hljs-built_in">console</span>.log(s.username,<span class="hljs-string">'静态类属性'</span>);
    <span class="hljs-comment">//执行当前函数</span>
    <span class="hljs-built_in">console</span>.log( staticDemo.getNowTime(<span class="hljs-number">1611631335165</span>),<span class="hljs-string">'时间转化'</span>);
</div></code></pre>
<h4 id="183-%E6%8A%BD%E8%B1%A1%E7%B1%BB-abstract">1.8.3 抽象类 abstract</h4>
<ul>
<li>定义一个抽象类，就是规定一种行为，其他子类继承这个抽象类的时候，必须要带有抽上定义的属性和方法</li>
</ul>
<pre class="hljs"><code><div><span class="hljs-comment">// 我们要创建一辆车 它得有车轱辘，它得能跑，它得能停</span>
 <span class="hljs-comment">//抽象类，就我们规定了一些行为，但是不去具体实现它，谁继承它，谁就具体去实现它</span>

 <span class="hljs-comment">//定义一个基本抽象类</span>
 abstract <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Car</span></span>{
     <span class="hljs-comment">//定义一个抽象的属相</span>
     abstract carName:<span class="hljs-built_in">String</span>
     <span class="hljs-comment">//定义一个抽象的方法</span>
     abstract run(someThing:string):<span class="hljs-built_in">String</span> 
      stop():<span class="hljs-keyword">void</span>{}
 }

 <span class="hljs-comment">//创建一个子类去继承抽象类</span>
 <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Bens</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Car</span></span>{
     <span class="hljs-comment">//具体去实现行为内容，实现父类定义好的抽象属相和方法</span>
     <span class="hljs-keyword">constructor</span>(){
         <span class="hljs-keyword">super</span>()
         <span class="hljs-comment">//抽象类的属相不需要在构造函数中定义</span>
     }
     carName = <span class="hljs-string">'奔驰宝马'</span>
     run(someThing:string):<span class="hljs-built_in">String</span>{
         <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${someThing}</span>`</span>
     }
 }

<span class="hljs-comment">//实例化子类</span>
<span class="hljs-keyword">let</span> b = <span class="hljs-keyword">new</span> Bens()
<span class="hljs-built_in">console</span>.log(b,<span class="hljs-string">'子类继承的抽象类'</span>);
<span class="hljs-built_in">console</span>.log(b.run(<span class="hljs-string">'跑起来。。。'</span>),<span class="hljs-string">'执行抽象类的方法'</span>);

</div></code></pre>
<h3 id="19-%E6%8E%A5%E5%8F%A3interface">1.9 接口（interface）</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 为什么会出现接口</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params">msg:String,userInfo:object,stuInfo:[{}],sex:Number...</span>)</span>{
        <span class="hljs-comment">//如果当前函数传入N个参数，每一个参数的类型校验都不一致，这时候大家会发现很麻烦，那么不如封装一个接口，这个接口专门用于属性或者方法或者类的校验</span>
    }
</div></code></pre>
<blockquote>
<p>普通属性接口</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//定义枚举类型</span>
    <span class="hljs-keyword">enum</span> Sex{
        newMan,newWoman
    }

    <span class="hljs-comment">//定义属性接口</span>
    <span class="hljs-keyword">interface</span> Person{
        name:<span class="hljs-built_in">String</span>,
        age:<span class="hljs-built_in">Number</span>,
        sex:Sex,
        hobby:<span class="hljs-built_in">Array</span>&lt;<span class="hljs-built_in">String</span>&gt;
    }
    <span class="hljs-comment">//调用封装好的属性接口</span>
    <span class="hljs-keyword">let</span> userInfo:Person ={
        name:<span class="hljs-string">"蔡文姬"</span>,
        age:<span class="hljs-number">20</span>,
        sex:<span class="hljs-number">0</span>,
        hobby:[<span class="hljs-string">'加血'</span>,<span class="hljs-string">'作诗'</span>,<span class="hljs-string">'到处跑'</span>],
    }
</div></code></pre>
<blockquote>
<p>函数接口</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//函数接口定义</span>
    <span class="hljs-keyword">interface</span> FN{
        <span class="hljs-comment">//给函数规定类型 要求这个函数参数必须是number类型，返回值也必须是Number类型</span>
    (food:<span class="hljs-built_in">number</span>):<span class="hljs-built_in">number</span>
    }

    <span class="hljs-keyword">interface</span> FN1{
        (info:<span class="hljs-built_in">String</span>):<span class="hljs-built_in">String</span>
    }

    <span class="hljs-comment">//调用定义好的接口</span>
    <span class="hljs-comment">//设定一个变量，是FN的接口类型</span>
    <span class="hljs-keyword">let</span> add:FN = <span class="hljs-function">(<span class="hljs-params">msg:<span class="hljs-built_in">number</span></span>)=&gt;</span>msg
    <span class="hljs-keyword">let</span> newsInfo:FN1 = <span class="hljs-function">(<span class="hljs-params">params:<span class="hljs-built_in">String</span></span>)=&gt;</span>params
</div></code></pre>
<blockquote>
<p>类的接口实现</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//首先顶一个一个接口</span>
    <span class="hljs-keyword">interface</span> Animal{
        name:<span class="hljs-built_in">String</span>,
        eat(food:<span class="hljs-built_in">String</span>):<span class="hljs-built_in">String</span>
    }
    <span class="hljs-comment">//创建一个类，让类去调用封装好的接口</span>
    <span class="hljs-comment">//类如果想要实现接口的调用必须用 implements（实现）</span>
    <span class="hljs-keyword">class</span> ZoomInfo <span class="hljs-keyword">implements</span> Animal{
        name:<span class="hljs-built_in">String</span>
        <span class="hljs-keyword">constructor</span>(<span class="hljs-params"></span>){
            <span class="hljs-comment">//给name进行初始化</span>
            <span class="hljs-keyword">this</span>.name = <span class="hljs-string">'狐狸'</span>
        }
        <span class="hljs-comment">//调用接口中的eat</span>
        eat(food:<span class="hljs-built_in">String</span>):<span class="hljs-built_in">String</span>{
            <span class="hljs-keyword">return</span> <span class="hljs-string">'正在吃'</span>+food
        }
    }

    <span class="hljs-keyword">let</span> zi = <span class="hljs-keyword">new</span> ZoomInfo() 
    <span class="hljs-built_in">console</span>.log(zi,<span class="hljs-string">'类'</span>);
</div></code></pre>
<h3 id="110-%E8%A3%85%E9%A5%B0%E5%99%A8">1.10 装饰器</h3>
<pre class="hljs"><code><div>    装饰器，在ES7中新增的内容
    装饰器其实就是一个普通的函数，用来修饰属性，方法，类
    如果在tsconfig.json中使用装饰器，我们要释放装饰器的配置项
    &quot;experimentalDecorators&quot;: true,       
</div></code></pre>
<h4 id="1101-%E6%99%AE%E9%80%9A%E7%B1%BB%E7%9A%84%E8%A3%85%E9%A5%B0%E5%99%A8">1.10.1 普通类的装饰器</h4>
<pre class="hljs"><code><div>    <span class="hljs-comment">//定义一个普通函数</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">classInfo:any</span>)</span>{
        <span class="hljs-comment">//classInfo 当前装饰器装饰的类</span>
        <span class="hljs-built_in">console</span>.log(classInfo,<span class="hljs-string">'你是谁'</span>);
        <span class="hljs-comment">//给类添加属相或者修改属相</span>
        classInfo.prototype.name =<span class="hljs-string">'我是一个名字'</span>
    }

    <span class="hljs-comment">//定义一个普通类</span>
    <span class="hljs-comment">//类的装饰器 用@符号去调用装饰器</span>
    @log
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Http</span></span>{
        <span class="hljs-comment">//保证调用的时候不报错，实际不需要加</span>
        <span class="hljs-attr">name</span>:<span class="hljs-built_in">String</span> | <span class="hljs-literal">undefined</span>
    }

    <span class="hljs-keyword">let</span> h = <span class="hljs-keyword">new</span> Http()

    <span class="hljs-built_in">console</span>.log(h,<span class="hljs-string">'指的是http类'</span>);
    <span class="hljs-built_in">console</span>.log(h.name,<span class="hljs-string">'这个是装饰器增加的类的属性'</span>);
</div></code></pre>
<h4 id="1102-%E6%99%AE%E9%80%9A%E7%B1%BB%E4%BC%A0%E5%8F%82%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F">1.10.2 普通类传参（工厂模式）</h4>
<pre class="hljs"><code><div>    <span class="hljs-comment">//装饰器是否可以传参数 </span>
    <span class="hljs-comment">//工厂模式</span>
    <span class="hljs-comment">//定义一个装饰器内容</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addInfo</span>(<span class="hljs-params">params:<span class="hljs-built_in">any</span></span>)</span>{
        <span class="hljs-comment">//params 是你调用装饰器传入的内容（参数）</span>
        <span class="hljs-built_in">console</span>.log(params,<span class="hljs-string">'被修饰的类11'</span>);
        <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">classInfo:<span class="hljs-built_in">any</span></span>)=&gt;</span>{
            <span class="hljs-comment">//classInfo 就是装饰的类</span>
            <span class="hljs-built_in">console</span>.log(classInfo,<span class="hljs-string">'参数打印'</span>);
            classInfo.prototype.name = params
        }
    }

    <span class="hljs-comment">//定义一个类</span>
    <span class="hljs-meta">@addInfo</span>(<span class="hljs-string">'小李白'</span>)
    <span class="hljs-keyword">class</span> Http1{

    }
    <span class="hljs-keyword">let</span> h1 = <span class="hljs-keyword">new</span> Http1() 
    <span class="hljs-built_in">console</span>.log(h1,<span class="hljs-string">'实例化http1'</span>);
</div></code></pre>
<h4 id="1103-%E5%B1%9E%E6%80%A7%E8%A3%85%E9%A5%B0%E5%99%A8">1.10.3 属性装饰器</h4>
<pre class="hljs"><code><div>    <span class="hljs-comment">// 属性装饰器</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">propInfo</span>(<span class="hljs-params">params:<span class="hljs-built_in">any</span></span>)</span>{
        <span class="hljs-comment">//params 是调用属性装饰器 传入的参数</span>
        <span class="hljs-comment">//className 当前类</span>
        <span class="hljs-comment">//propsName 被修饰的类属性</span>
        <span class="hljs-built_in">console</span>.log(params,<span class="hljs-string">'属性aaaaa'</span>);
        
        <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">className:<span class="hljs-built_in">any</span>,propsName:<span class="hljs-built_in">any</span></span>)=&gt;</span>{
            <span class="hljs-built_in">console</span>.log(className,<span class="hljs-string">'xxxxx'</span>);
            <span class="hljs-built_in">console</span>.log(propsName,<span class="hljs-string">'yyyyyyyy'</span>);
            <span class="hljs-comment">//给修饰的属性传值</span>
            className[propsName] = params
        }
    }

    <span class="hljs-comment">//定义一个类</span>
    <span class="hljs-keyword">class</span> Http2{
        <span class="hljs-comment">//作为属性装饰器 必须要传入一个参数</span>
    <span class="hljs-meta">@propInfo</span>(<span class="hljs-string">'路飞'</span>)  name:<span class="hljs-built_in">String</span> | <span class="hljs-literal">undefined</span>
    <span class="hljs-meta">@propInfo</span>(<span class="hljs-number">200</span>) age:<span class="hljs-built_in">number</span> | <span class="hljs-literal">undefined</span>
    }

    <span class="hljs-keyword">let</span> h2 = <span class="hljs-keyword">new</span> Http2 
    <span class="hljs-built_in">console</span>.log(h2,<span class="hljs-string">'http2实例化'</span>);

</div></code></pre>
<h4 id="1104-%E6%96%B9%E6%B3%95%E4%BF%AE%E9%A5%B0%E5%99%A8">1.10.4 方法修饰器</h4>
<pre class="hljs"><code><div>    <span class="hljs-comment">//方法装饰器</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">methodInfo</span>(<span class="hljs-params">a:<span class="hljs-built_in">any</span></span>)</span>{
        <span class="hljs-comment">//a 就是调用方法装饰器的传入参数</span>
        <span class="hljs-comment">//x 就是类</span>
        <span class="hljs-comment">//y 是你修饰的方法名</span>
        <span class="hljs-comment">//z 当前方法的配置项</span>
        <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">x:<span class="hljs-built_in">any</span>,y:<span class="hljs-built_in">any</span>,z:<span class="hljs-built_in">any</span></span>)=&gt;</span>{
            <span class="hljs-built_in">console</span>.log(a,<span class="hljs-string">'aaaaaaaa'</span>);
            <span class="hljs-built_in">console</span>.log(x,<span class="hljs-string">'xxxxxxxx'</span>);
            <span class="hljs-built_in">console</span>.log(y,<span class="hljs-string">'yyyyyyyyy'</span>);
            <span class="hljs-built_in">console</span>.log(z,<span class="hljs-string">'zzzzzz'</span>);
            
        }
    }

    <span class="hljs-comment">//定义一个类</span>
    <span class="hljs-keyword">class</span> Http3{
    <span class="hljs-meta">@methodInfo</span>(<span class="hljs-string">'方法'</span>) getInfo(msg:<span class="hljs-built_in">String</span>):<span class="hljs-built_in">any</span>{

        }
    }
    <span class="hljs-keyword">let</span> h3 = <span class="hljs-keyword">new</span> Http3 
    <span class="hljs-built_in">console</span>.log(h3,<span class="hljs-string">'http3实例化'</span>);

</div></code></pre>
<h2 id="2-vue4x%E8%84%9A%E6%89%8B%E6%9E%B6%E7%BB%93%E5%90%88ts%E5%8E%BB%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE">2 vue4.x脚手架（结合ts去创建项目）</h2>
<h3 id="21-%E5%AE%89%E8%A3%85%E6%96%B9%E6%B3%95">2.1 安装方法</h3>
<pre class="hljs"><code><div>
    最新版本脚手架 安装命令
    vue create xiangmu (项目名称)
    ======================================
    如果在某一个盘符创建，报错。如何解决？
    在C盘桌面创建，看是否成功，如果成功，那就是其他盘符可能产生权限问题或者中文目录结构有影响
    网速过慢，无法安装？
    首先要把npm来源修改成淘宝镜像的来源，
    修改成功之后，还是无法解决该需求，换4G下载
    =============================================

    选择创建模式
    ? Please pick a preset: (Use arrow keys)
    default (babel, eslint) // 默认模式
    ❯ Vue2.X 默认版本 （核心库）
    ❯ Vue3.X 默认版本  （核心库）
    ❯ Manually select features //自主选择对应内容，我们可以选择这个

    选择对应内容，上下键移动，空格键选择
    Check the features needed for your project: 
    ◉ Babel		//语法编译   es6转es5
    ◉ TypeScript	//用ts语法 这个依赖只要选择，你的代码语法都要变，遵循ts对数据的基本要求
    ◯ Progressive Web App (PWA) Support   // 网页渐进app
    ◉ Router	//安装vue-router		
    ◉ Vuex		//安装vuex
    ◉ CSS Pre-processors		//使用css预处理器  sass or less 、stylus
    ❯◉ Linter / Formatter		// 语法检查  (不强制要求)
    ◯ Unit Testing		//单元测试
    ◯ E2E Testing			//集成测试

    是否使用class方式风格的组件
    ? Use class-style component syntax? (Y/n)    // y

    是否使用babel进行转义
    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
    lls, transpiling JSX)? (Y/n)    // y

    是否使用history模式的路由
    ? Use history mode for router? (Requires proper server setup for index fallback 
    in production) (Y/n)     // y

    选择哪种css处理器
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
    by default): (Use arrow keys)
    ❯ Sass/SCSS (with dart-sass)     // 根据情况自己选择
    Sass/SCSS (with node-sass) 
    Less 
    Stylus 

    代码格式化检测
    ? Pick a linter / formatter config: (Use arrow keys)
    ❯ ESLint with error prevention only    // 只进行报错提醒 (没使用ts，建议这个)
    ESLint + Airbnb config 			// 不严谨模式
    ESLint + Standard config        // 正常模式
    ESLint + Prettier                // 严格模式
    TSLint (deprecated)             // typescript格式校验工具 

    选择语法检查方式
    ? Pick additional lint features: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i
    &gt; to invert selection)
    ❯◉ Lint on save   // 保存就检测
    ◯ Lint and fix on commit   // fix和commit时候就检测

    把babel,postcss,eslint这些配置文件放哪，独立文件夹还是package.json文件里。
    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    ❯ In dedicated config files   // 根据情况，我这选择package.json   
    In package.json   
</div></code></pre>
<h3 id="22-%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95">2.2 项目目录</h3>
<pre class="hljs"><code><div>    node_modules 插件集合
    public 静态资源
    src 主战场

</div></code></pre>
<h1 id="%E7%AC%AC%E5%8D%81%E4%B8%83%E5%A4%A9">第十七天</h1>
<h2 id="1-vue%E6%9C%80%E6%96%B0%E7%89%88%E8%84%9A%E6%89%8B%E6%9E%B6">1 Vue最新版脚手架</h2>
<ul>
<li>vue-cli + ts + class(类创建的组件)</li>
<li>如果是最新版脚手架+之前的组件创建方式，做项目没有任何变化（与2.9.x相比）</li>
</ul>
<h3 id="11-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E9%A1%B9%E7%9B%AE">1.1 如何创建一个项目</h3>
<ul>
<li>vue create 项目名称（根据你的需求）</li>
</ul>
<h3 id="12-%E5%AE%98%E7%BD%91%E5%86%85%E5%AE%B9">1.2 官网内容</h3>
<ul>
<li>https://cli.vuejs.org/zh/</li>
</ul>
<h3 id="13-%E5%AE%89%E8%A3%85%E7%9A%84%E6%AD%A5%E9%AA%A4">1.3 安装的步骤</h3>
<pre class="hljs"><code><div>    直接安装最新的版本

    先装环境
    npm install -g @vue/cli

    下载项目
    vue create 项目名称（根据你的需求）

    查看 vue的版本
    vue --version

    如果本地的脚手架版本是低版本，可以进行升级
    npm update -g @vue/cli
</div></code></pre>
<h3 id="14-%E6%97%A7%E7%89%88%E8%84%9A%E6%89%8B%E6%9E%B6%E7%9B%B8%E6%AF%94%E8%BF%99%E7%89%88%E6%9C%AC%E7%9A%84%E5%86%85%E5%AE%B9%E5%8F%98%E5%8C%96">1.4 旧版脚手架相比这版本的内容变化</h3>
<blockquote>
<p>data属性的定义</p>
</blockquote>
<pre class="hljs"><code><div>    {
        <span class="hljs-comment">//类的作用域</span>
        <span class="hljs-comment">//声明并定义数据类型</span>
        <span class="hljs-attr">name</span>:<span class="hljs-built_in">String</span> | <span class="hljs-literal">undefined</span>(不作初始化的时候)
    }
</div></code></pre>
<blockquote>
<p>methods变化</p>
</blockquote>
<pre class="hljs"><code><div>    // 视图
    &lt;div&gt;
        &lt;button @click='getInfo'&gt;点击我有惊喜&lt;/button&gt;
    &lt;/div&gt;
            
    // 逻辑部分
    //定义方法
    // getInfo():String{
    //     console.log('触发这个方法');
        
    //     return '这是一个方法'
    // }
    getInfo():void{
        
    }
</div></code></pre>
<h3 id="15-%E9%85%8D%E7%BD%AE%E9%A1%B9">1.5 配置项</h3>
<ul>
<li>在你的项目目录下创建一个文件，叫 vue.config.js</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-built_in">module</span>.exports = {
        <span class="hljs-comment">// 部署应用时的基本 URL</span>
        <span class="hljs-attr">publicPath</span>:<span class="hljs-string">""</span>,
        <span class="hljs-comment">// build时构建文件的目录 </span>
        <span class="hljs-attr">outputDir</span>: <span class="hljs-string">'dist'</span>,
        <span class="hljs-comment">// build时放置生成的静态资源 (js、css、img、fonts) 的目录</span>
        <span class="hljs-attr">assetsDir</span>: <span class="hljs-string">'static'</span>,
        <span class="hljs-comment">// 指定生成的 index.html </span>
        <span class="hljs-attr">indexPath</span>: <span class="hljs-string">'index.html'</span>, 
        <span class="hljs-comment">// 设置代理请求</span>
        <span class="hljs-attr">devServer</span>: {
            <span class="hljs-attr">proxy</span>: {
                <span class="hljs-string">'/api'</span>: {
                    <span class="hljs-attr">target</span>: <span class="hljs-string">'&lt;url&gt;'</span>,
                    <span class="hljs-attr">ws</span>: <span class="hljs-literal">true</span>,
                    <span class="hljs-attr">changeOrigin</span>: <span class="hljs-literal">true</span>
                    },
                }
        }
    }
</div></code></pre>
<h2 id="2-react%E5%9F%BA%E6%9C%AC%E7%9F%A5%E8%AF%86">2  React基本知识</h2>
<pre class="hljs"><code><div>    流行的三大框架（React并不算一个框架，只是一个库）
    vue  作者： 尤雨溪 大部分使用者都是中国人
    React 脸书 Facebook （国内大多数互联网公司已经转战到React，尤其以BAT为首）（react+Hook+dva+umi）
    Angular 谷歌开发，它有两大阵营，angular1.x版本（还在维护）MVC框架模式，突然它改革了。它结合了ts（微软）开发了angular2.x MVVM的框架模式 （欧美公司用的多一些）
</div></code></pre>
<h3 id="21-react-%E4%BB%8B%E7%BB%8D">2.1 react 介绍</h3>
<blockquote>
<p>React 是Facebook内部的一个JavaScript类库。（13年5月开源）
React 可用于创建Web用户交互界面（还是视图）。
React不是一个完整的MVC框架,最多可以认为是MVC中的V（View）,甚至React并不非常认可MVC开发模式。
​	MVC（M model模型 V view视图 C controller 控制器）
React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。
React 引入了虚拟DOM（Virtual DOM）的机制。
React 引入了组件化的思想。
React 使用Facebook专门为其开发的一套语法糖--JSX（语法糖）。	<br>
​把js和html代码混合使用</p>
</blockquote>
<h3 id="22-%E7%89%B9%E7%82%B9">2.2 特点</h3>
<blockquote>
<p>虚拟DOM</p>
</blockquote>
<ul>
<li>概念： React不会直接操作真实的DOM，而是利用javascript的轻量级的对象去操作逻辑。这个对象我们就称之为虚拟dom</li>
</ul>
<blockquote>
<p>组件化</p>
</blockquote>
<ul>
<li>react在创建的过程中，就是利用组件的方式去进行创建</li>
</ul>
<blockquote>
<p>JSX语法</p>
</blockquote>
<ul>
<li>让html和js 混合使用</li>
</ul>
<h3 id="23-%E4%BC%98%E7%BC%BA%E7%82%B9">2.3 优缺点</h3>
<blockquote>
<p>优点</p>
</blockquote>
<pre class="hljs"><code><div>    ● React速度很快
    react并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。

    ● 跨浏览器兼容
    虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

    ● 一切皆是组件
    代码更加模块化，重用代码更容易，可维护性高。

    ● 单向数据流
    Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。

    ● 同构、纯粹的javascript
    因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

    ● 兼容性好
    比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

</div></code></pre>
<blockquote>
<p>缺点</p>
</blockquote>
<pre class="hljs"><code><div>    React不适合做一个完成的框架。
    React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
</div></code></pre>
<h3 id="24-jsx%E5%AE%83%E7%9A%84%E7%89%B9%E7%82%B9">2.4 jsx它的特点</h3>
<pre class="hljs"><code><div>    jsx(javascript and XMl)
    它是js的扩展的语法，是语法糖
    它可以是html和js混合使用
    它的代码结构非常清晰，可以使代码模块化
    它遇见&lt;&gt;，它会自动解析成html标签。它遇见{}它会解析成为变量
</div></code></pre>
<h3 id="25-%E5%AE%98%E7%BD%91%E5%9C%B0%E5%9D%80">2.5 官网地址</h3>
<ul>
<li>https://react.docschina.org/</li>
</ul>
<h3 id="26-%E6%A6%82%E5%BF%B5">2.6 概念</h3>
<ul>
<li>用于构建用户界面的 JavaScript 库</li>
</ul>
<h3 id="27-%E4%B8%8B%E8%BD%BD%E5%B9%B6%E5%AE%89%E8%A3%85%E9%9D%9E%E8%84%9A%E6%89%8B%E6%9E%B6%E7%89%88%E6%9C%AC">2.7 下载并安装（非脚手架版本）</h3>
<blockquote>
<p>CDN 把文件下载到本地去使用</p>
</blockquote>
<ul>
<li>开发环境地址</li>
</ul>
<pre class="hljs"><code><div>    &lt;script crossorigin src=<span class="hljs-string">"https://unpkg.com/react@16/umd/react.development.js"</span>&gt;&lt;<span class="hljs-regexp">/script&gt;
    &lt;script crossorigin src="https:/</span><span class="hljs-regexp">/unpkg.com/</span>react-dom@<span class="hljs-number">16</span>/umd/react-dom.development.js<span class="hljs-string">"&gt;&lt;/script&gt;
</span></div></code></pre>
<ul>
<li>生产环境</li>
</ul>
<pre class="hljs"><code><div>    &lt;script crossorigin src=<span class="hljs-string">"https://unpkg.com/react@16/umd/react.production.min.js"</span>&gt;&lt;<span class="hljs-regexp">/script&gt;
    &lt;script crossorigin src="https:/</span><span class="hljs-regexp">/unpkg.com/</span>react-dom@<span class="hljs-number">16</span>/umd/react-dom.production.min.js<span class="hljs-string">"&gt;&lt;/script&gt;
</span></div></code></pre>
<h3 id="28-%E5%AE%89%E8%A3%85%E8%84%9A%E6%89%8B%E6%9E%B6">2.8 安装脚手架</h3>
<pre class="hljs"><code><div>    全局 安装环境
    npm install(i) -g create-react-app

    + create-react-app@4.0.1

    安装项目
    create-react-app 项目名称
</div></code></pre>
<h3 id="29-%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84">2.9 目录结构</h3>
<pre class="hljs"><code><div>    my-app							--项目名称
    ├── README.md					--阅读指南
    ├── node_modules				--依赖包
    ├── package.json				--包管理配置文件
    ├── .gitignore					--git忽略文件
    ├── public						--静态资源
    │   ├── favicon.ico				--收藏夹的图标
    │   ├── index.html				--主文件
    │   └── manifest.json			--主题配置
    └── src							--主战场
        ├── App.css					--主组件样式文件
        ├── App.js					--主组件
        ├── App.test.js				--测试文件
        ├── index.css				--主的css文件
        ├── index.js				--主的js文件
        ├── logo.svg				--默认图标
        └── serviceWorker.js		--离线服务器
        └── setupTests.js			--测试服务
</div></code></pre>
<h2 id="3-%E7%BB%84%E4%BB%B6%E7%9A%84%E5%AE%9A%E4%B9%89">3 组件的定义</h2>
<h3 id="31-%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C">3.1 组件注册</h3>
<h4 id="311-%E5%87%BD%E6%95%B0%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6">3.1.1 函数定义组件</h4>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>

    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">First</span>(<span class="hljs-params">props</span>) </span>{
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"first"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>this is first<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> First;
</div></code></pre>
<h4 id="312-%E7%B1%BB%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6">3.1.2 类定义组件</h4>
<pre class="hljs"><code><div>    <span class="hljs-comment">//类定义</span>
    <span class="hljs-keyword">import</span> React,{ Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Second</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
        render() {
            <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"second"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>this is second<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
            );
        }
    }
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Second;
</div></code></pre>
<h4 id="313-%E6%B3%A8%E6%84%8F">3.1.3 注意</h4>
<pre class="hljs"><code><div>    1.组件命名的时候，首字母大写，组件叫什么，就怎么调用；
    2.可以取已经存在的标签的大写
    3.模板只能有一个根节点
    4.react中没有全局组件，所有的组件，都需要引入，才能用
</div></code></pre>
<h3 id="32-%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A">3.2 事件绑定</h3>
<ul>
<li>如何创建事件=&gt;事件的传参=&gt;如何传递事件源=&gt;阻止默认事件，阻止冒泡=&gt;不同的框架中的不同应用</li>
</ul>
<h4 id="321-%E5%A6%82%E4%BD%95%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6">3.2.1 如何绑定事件</h4>
<pre class="hljs"><code><div>    {<span class="hljs-comment">/* bind绑定方式 */</span>}
    &lt;button onClick={<span class="hljs-keyword">this</span>.getInfo.bind(<span class="hljs-keyword">this</span>)}&gt;事件一&lt;<span class="hljs-regexp">/button&gt;
    {/</span>* 箭头函数方式 *<span class="hljs-regexp">/}
    &lt;button onClick={()=&gt;this.getMsg()}&gt;点击事件二&lt;/</span>button&gt;
</div></code></pre>
<h4 id="322-%E5%87%BD%E6%95%B0%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0">3.2.2 函数传递参数</h4>
<pre class="hljs"><code><div>    {<span class="hljs-comment">/* 函数传递参数 */</span>}

    &lt;div&gt;
        {<span class="hljs-comment">/* bind绑定方式 */</span>}
        &lt;button onClick={<span class="hljs-keyword">this</span>.getInfo1.bind(<span class="hljs-keyword">this</span>,<span class="hljs-string">'参数一'</span>)}&gt;事件一&lt;<span class="hljs-regexp">/button&gt;
    &lt;/</span>div&gt;

    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
        {/* 箭头函数方式 */}
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> this.getMsg1('canshu一')}&gt;点击事件二<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</div></code></pre>
<h4 id="323-%E4%BC%A0%E9%80%92%E4%BA%8B%E4%BB%B6%E6%BA%90">3.2.3 传递事件源</h4>
<pre class="hljs"><code><div>    &lt;div&gt;
        {<span class="hljs-comment">/* bind绑定方式 */</span>}
        {<span class="hljs-comment">/* 隐式传递事件源 */</span>}
        &lt;button onClick={<span class="hljs-keyword">this</span>.getInfo2.bind(<span class="hljs-keyword">this</span>)}&gt;事件一&lt;<span class="hljs-regexp">/button&gt;
    &lt;/</span>div&gt;
    
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
        {/* 箭头函数方式 */}
        {/* 显示传参，一般情况下传递 event */}
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{($event)</span> =&gt;</span> this.getMsg2($event)}&gt;点击事件二<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</div></code></pre>
<h1 id="%E7%AC%AC%E5%8D%81%E5%85%AB%E5%A4%A9">第十八天</h1>
<h2 id="1-%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD">1 事件传播</h2>
<h3 id="11-%E7%BB%84%E7%BB%87%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA">1.1 组织默认行为</h3>
<pre class="hljs"><code><div>    yj(e) {
        e.preventDefault();
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"右键了"</span>);
    }

    &lt;div className=<span class="hljs-string">"box"</span>&gt;
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>阻止默认<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span>
        {<span class="hljs-comment">/* 
            阻止默认
            e.preventDefault().
            【注意】：return false 不可以。
        */</span>}
        &lt;div className=<span class="hljs-string">"red"</span> onContextMenu={(e) =&gt; <span class="hljs-keyword">this</span>.yj(e)}&gt;&lt;<span class="hljs-regexp">/div&gt;
    &lt;/</span>div&gt;
</div></code></pre>
<h3 id="12-%E9%98%BB%E6%AD%A2%E5%86%92%E6%B3%A1">1.2 阻止冒泡</h3>
<pre class="hljs"><code><div>	outerClick() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"outer click"</span>);
    }
    innerClick(e) {
        e.stopPropagation();
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"inner click"</span>);
    }

    &lt;h2&gt;阻止传播&lt;<span class="hljs-regexp">/h2&gt;
    {/</span>* 
        阻止传播
        e.stopPropagation();
    *<span class="hljs-regexp">/}
    &lt;div className="outer" onClick={() =&gt; this.outerClick()}&gt;
        &lt;div className="inner" onClick={(e) =&gt; this.innerClick(e)}&gt;
            冒泡
        &lt;/</span>div&gt;
    &lt;<span class="hljs-regexp">/div&gt;
</span></div></code></pre>
<h3 id="13-%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7">1.3 事件捕获</h3>
<pre class="hljs"><code><div>    &lt;div className=<span class="hljs-string">"outer"</span> onClickCapture={(e) =&gt; <span class="hljs-keyword">this</span>.outerClick2(e)}&gt;
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"inner"</span> <span class="hljs-attr">onClickCapture</span>=<span class="hljs-string">{()</span> =&gt;</span> this.innerClick2()}&gt;
            捕获
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
    &lt;<span class="hljs-regexp">/div&gt;
</span></div></code></pre>
<h2 id="2-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%E7%BB%84%E5%BB%BA%E7%9A%84%E4%BC%A0%E5%80%BC">2 组件通信（组建的传值）</h2>
<h3 id="21-%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E9%80%9A%E4%BF%A1">2.1 父子组件之间的通信</h3>
<blockquote>
<p>父组件</p>
</blockquote>
<pre class="hljs"><code><div>  &lt;子组件 自定义属性名=<span class="hljs-string">'字符串'</span> 自定义属性名={变量} 自定义属性名={方法/事件}&gt;&lt;<span class="hljs-regexp">/子组件&gt;
</span></div></code></pre>
<blockquote>
<p>子组件</p>
</blockquote>
<ul>
<li>
<pre><code>  类的组件
</code></pre>
</li>
</ul>
<pre class="hljs"><code><div>    本身在组件的对象上含有props属性
    取值是： this.props.自定义属性名
</div></code></pre>
<ul>
<li>
<pre><code>  函数组件
</code></pre>
</li>
</ul>
<pre class="hljs"><code><div>    在函数中用props作为形参去接收父组件传递的内容
    取值： props.自定义属性名
</div></code></pre>
<h3 id="22-%E5%AD%90%E7%88%B6%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E9%80%9A%E4%BF%A1">2.2 子父组件之间的通信</h3>
<blockquote>
<p>子组件</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;button onClick={自定义属性名.bind(<span class="hljs-keyword">this</span>,<span class="hljs-string">'要传递的数据'</span>)}&gt;&lt;<span class="hljs-regexp">/button&gt;

    &lt;button onClick={()=&gt;自定义属性名('要传递的数据')}&gt;&lt;/</span>button&gt;
</div></code></pre>
<blockquote>
<p>父组件</p>
</blockquote>
<pre class="hljs"><code><div>    方法/事件(e){
        <span class="hljs-comment">//e 就是 子组件传递的数据</span>
    }

    &lt;子组件 自定义属性名={<span class="hljs-keyword">this</span>.方法/事件.bind(<span class="hljs-keyword">this</span>)}&gt;&lt;<span class="hljs-regexp">/子组件&gt;

    &lt;子组件 自定义属性名={(event)=&gt;this.方法/</span>事件(event)}&gt;&lt;<span class="hljs-regexp">/子组件&gt;
</span></div></code></pre>
<ul>
<li>子组件的input 去修改父组件的数据</li>
</ul>
<blockquote>
<p>子组件</p>
</blockquote>
<pre class="hljs"><code><div>     <span class="hljs-keyword">const</span> {changeVal } = <span class="hljs-keyword">this</span>.props;
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
              {/* input是表单 表单的事件 onchange */}
              {/* 箭头函数的显示传递事件源 */}
             数据： <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(e)</span>=&gt;</span>changeVal(e)}/&gt;
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>

</div></code></pre>
<blockquote>
<p>父组件</p>
</blockquote>
<pre class="hljs"><code><div>  <span class="hljs-comment">//封装一个修改state的val的事件</span>
    changeVal(e){
        <span class="hljs-built_in">console</span>.log(e.target.value,<span class="hljs-string">'我被触发事件源'</span>);
        <span class="hljs-keyword">this</span>.setState({
            <span class="hljs-attr">val</span>:e.target.value
        })
    }
    
    &lt;Son changeVal= {(event)=&gt;<span class="hljs-keyword">this</span>.changeVal(event)}&gt;&lt;<span class="hljs-regexp">/Son&gt;
    &lt;h1&gt;通过子组件中的input修改的---{val}&lt;/</span>h1&gt;

</div></code></pre>
<h3 id="23-%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1">2.3 非父子组件通信</h3>
<ul>
<li>利用离线存储方式</li>
<li>Flux 状态管理</li>
<li>redux 状态管理</li>
</ul>
<h2 id="3-%E8%A1%A8%E5%8D%95%E5%A4%84%E7%90%86">3 表单处理</h2>
<h3 id="31-%E7%99%BB%E5%BD%95">3.1 登录</h3>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
        <span class="hljs-keyword">constructor</span>(){
            <span class="hljs-keyword">super</span>()
            <span class="hljs-keyword">this</span>.state={
                <span class="hljs-attr">userInfo</span>:{
                    <span class="hljs-attr">username</span>:<span class="hljs-string">''</span>,
                    <span class="hljs-attr">password</span>:<span class="hljs-string">''</span>
                }
            }
        }
        <span class="hljs-comment">//封装一个公共的change事件</span>
        getVal(type,e){
            <span class="hljs-built_in">console</span>.log(type,<span class="hljs-string">'区分的类型'</span>);
            <span class="hljs-keyword">let</span> userInfo = <span class="hljs-keyword">this</span>.state.userInfo
            userInfo[type] = e.target.value
            <span class="hljs-keyword">this</span>.setState({
                userInfo
            })
        }
        <span class="hljs-comment">//封装一个登录事件</span>
        login(){
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.state.userInfo,<span class="hljs-string">'登录的表单项'</span>);
        }
        render(){
                <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>欢迎登录<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                        用户名: <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.getVal.bind(this,</span>'<span class="hljs-attr">username</span>')}/&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                        密码: <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.getVal.bind(this,</span>'<span class="hljs-attr">password</span>')}/&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.login.bind(this)}</span>&gt;</span>登录<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>)
            }
    }
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Login
</div></code></pre>
<h3 id="32-%E6%B3%A8%E5%86%8C">3.2 注册</h3>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Register</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    <span class="hljs-comment">/* 
        用户名 username
        密码 password
        性别 sex
        工作种类 job
        爱好 hobby
        是否同意协议 isAgree 
        备忘  remark
        */</span>
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">super</span>();
        <span class="hljs-keyword">this</span>.state = {
        <span class="hljs-attr">regList</span>: {
            <span class="hljs-attr">username</span>: <span class="hljs-string">""</span>,
            <span class="hljs-attr">password</span>: <span class="hljs-string">""</span>,
            <span class="hljs-attr">sex</span>: <span class="hljs-string">"0"</span>, <span class="hljs-comment">//0代表男 1代表女</span>
            <span class="hljs-attr">job</span>: <span class="hljs-string">""</span>,
            <span class="hljs-attr">remark</span>: <span class="hljs-string">""</span>,
            <span class="hljs-attr">isAgree</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-attr">hobby</span>: [], <span class="hljs-comment">//多选</span>
        },
        <span class="hljs-attr">jobList</span>: [
            { <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">"测试攻城狮"</span> },
            { <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">"产品经理"</span> },
            { <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">"java编码"</span> },
            { <span class="hljs-attr">id</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">"大前端"</span> },
        ],
        <span class="hljs-attr">hobbyList</span>: [
            {
            <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,
            <span class="hljs-attr">value</span>: <span class="hljs-string">"学习"</span>,
            <span class="hljs-attr">checked</span>: <span class="hljs-literal">false</span>,
            },
            {
            <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,
            <span class="hljs-attr">value</span>: <span class="hljs-string">"落地成盒"</span>,
            <span class="hljs-attr">checked</span>: <span class="hljs-literal">false</span>,
            },
            {
            <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,
            <span class="hljs-attr">value</span>: <span class="hljs-string">"吃山药"</span>,
            <span class="hljs-attr">checked</span>: <span class="hljs-literal">false</span>,
            },
            {
            <span class="hljs-attr">id</span>: <span class="hljs-number">4</span>,
            <span class="hljs-attr">value</span>: <span class="hljs-string">"记录美好生活"</span>,
            <span class="hljs-attr">checked</span>: <span class="hljs-literal">false</span>,
            },
        ],
        };
    }
    <span class="hljs-comment">//change事件</span>
    changeVal(type, index, e) {
        <span class="hljs-keyword">let</span> value = e.target.value;
        <span class="hljs-comment">//复选框的值是value吗？？？？ 不是！！！ 应该用 checked</span>
        <span class="hljs-comment">// console.log(e.target.checked,'是否同意');</span>
        <span class="hljs-comment">//根据不同的表单取值方式，我们要做不同的判断</span>
        <span class="hljs-keyword">if</span> (type == <span class="hljs-string">"isAgree"</span>) {
        value = e.target.checked;
        }
        <span class="hljs-comment">//对于爱好，我们也要有特殊的判断 因为它是一个多选</span>
        <span class="hljs-keyword">if</span> (type == <span class="hljs-string">"hobby"</span>) {
        <span class="hljs-comment">//找到视图数组</span>
        <span class="hljs-keyword">const</span> { hobbyList } = <span class="hljs-keyword">this</span>.state;
        hobbyList[index].checked = e.target.checked;
        <span class="hljs-comment">//过滤出选中的内容拼接成一个新数组</span>
        <span class="hljs-keyword">let</span> arr = hobbyList.filter(<span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span> item.checked);
        <span class="hljs-built_in">console</span>.log(arr, <span class="hljs-string">"新数组"</span>);
        <span class="hljs-comment">//根据后端需求生成还有id或者value的新数组</span>
        <span class="hljs-comment">// value = arr.map(item=&gt;item.id)</span>
        value = arr.map(<span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span> item.value);
        }
        <span class="hljs-keyword">this</span>.setState({
        <span class="hljs-attr">regList</span>: {
            <span class="hljs-comment">//展开对象</span>
            ...this.state.regList,
            <span class="hljs-comment">//如果key是一个变量，那么我们要加[key]</span>
            [type]: value,
        },
        });
    }
    <span class="hljs-comment">//注册事件</span>
    register() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.state.regList, <span class="hljs-string">"提交的表单体"</span>);
    }
    render() {
        <span class="hljs-keyword">const</span> { regList, jobList, hobbyList } = <span class="hljs-keyword">this</span>.state;
        <span class="hljs-keyword">return</span> (
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>注册案例<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            用户名：
            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.changeVal.bind(this,</span> "<span class="hljs-attr">username</span>")} /&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            密码：{" "}
            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.changeVal.bind(this,</span> "<span class="hljs-attr">password</span>")} /&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            男{" "}
            <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
                <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>
                <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.changeVal.bind(this,</span> "<span class="hljs-attr">sex</span>")}
                <span class="hljs-attr">checked</span>=<span class="hljs-string">{regList.sex</span> == <span class="hljs-string">0}</span>
                <span class="hljs-attr">value</span>=<span class="hljs-string">"0"</span>
                <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span>
            /&gt;</span>
            女{" "}
            <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
                <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span>
                <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.changeVal.bind(this,</span> "<span class="hljs-attr">sex</span>")}
                <span class="hljs-attr">checked</span>=<span class="hljs-string">{regList.sex</span> == <span class="hljs-string">1}</span>
                <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span>
                <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span>
            /&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            工作种类：{" "}
            <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.changeVal.bind(this,</span> "<span class="hljs-attr">job</span>")} <span class="hljs-attr">name</span>=<span class="hljs-string">""</span> <span class="hljs-attr">id</span>=<span class="hljs-string">""</span>&gt;</span>
                {jobList.map((item) =&gt; {
                return (
                    <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{item.id}</span>&gt;</span>
                    {item.value}
                    <span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
                );
                })}
            <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            备忘录：{" "}
            <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span>
                <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.changeVal.bind(this,</span> "<span class="hljs-attr">remark</span>")}
                <span class="hljs-attr">name</span>=<span class="hljs-string">""</span>
                <span class="hljs-attr">id</span>=<span class="hljs-string">""</span>
                <span class="hljs-attr">cols</span>=<span class="hljs-string">"30"</span>
                <span class="hljs-attr">rows</span>=<span class="hljs-string">"10"</span>
            &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            是否同意：
            <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
                <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>
                <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.changeVal.bind(this,</span> "<span class="hljs-attr">isAgree</span>")}
            /&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            爱好：
            {hobbyList.map((item, index) =&gt; {
                return (
                <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
                    <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>
                    <span class="hljs-attr">checked</span>=<span class="hljs-string">{item.checked}</span>
                    <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.changeVal.bind(this,</span> "<span class="hljs-attr">hobby</span>", <span class="hljs-attr">index</span>)}
                    /&gt;</span>
                    {item.value}
                <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
                );
            })}
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.register.bind(this)}</span>&gt;</span>注册<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
    }
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Register;

</div></code></pre>
<h2 id="4-ref%E5%B1%9E%E6%80%A7">4 ref属性</h2>
<ul>
<li>快速获取到DOM节点</li>
</ul>
<h3 id="41-%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%96%B9%E5%BC%8F">4.1 字符串的方式</h3>
<ul>
<li>新版本的React中已经废弃这种方式了</li>
</ul>
<h3 id="42-%E9%80%9A%E8%BF%87api%E6%96%B9%E6%B3%95%E5%88%9B%E5%BB%BAref%E5%B1%9E%E6%80%A7">4.2 通过API方法创建ref属性</h3>
<pre class="hljs"><code><div>  <span class="hljs-keyword">this</span>.ref属性名 = React.createRef()
  
  &lt;div ref={<span class="hljs-keyword">this</span>.ref属性名}&gt;&lt;<span class="hljs-regexp">/div&gt;
  
  获取值： this.ref属性名.current
</span></div></code></pre>
<h2 id="5-%E8%BF%87%E6%BB%A4%E5%99%A8%E5%92%8C%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7">5 过滤器和计算属性</h2>
<ul>
<li>React没有</li>
<li>可以模拟</li>
</ul>
<h2 id="6-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F">6 生命周期</h2>
<pre class="hljs"><code><div>    1.初始期：一个组件实例，初始期只执行一次
        constructor:初始化数据 **
        UNSAFE_componentWillMount:废弃！！！
        render:渲染:创建DOM节点 **
        componentDidMount：渲染完成,发请求，开计时器，window|document绑定事件，ref **

        父子组件初始期的生命周期：
        父：constructor-》UNSAFE_componentWillMount-》render-》
        子：constructor-》UNSAFE_componentWillMount-》render-》componentDidMount
        父： componentDidMount

    2.更新期:state| props的改变，会触发
        UNSAFE_componentWillReceiveProps：父组件传递的数据发生了改变，才会执行 废弃！！！
        shouldComponentUpdate 跳过某次更新
            1.不写，正常更新 UNSAFE_componentWillUpdate-》render-&gt;componentDidUpdate
            2.写了
                2.1没有返回值，报错
                2.2 return true shouldComponentUpdate-&gt;UNSAFE_componentWillUpdate-》render-&gt;componentDidUpdate
                2.3 return false shouldComponentUpdate
    
        UNSAFE_componentWillUpdate： 废弃！！！！
        render：先生成一棵ReactDOM树，用这棵DOM树对比页面的节点，进行diff算法，计算出最优的更新方式，进行更新
        componentDidUpdate

    3.销毁期
        componentWillUnmount：销毁之前，做善后工作
</div></code></pre>
<h1 id="%E7%AC%AC%E5%8D%81%E4%B9%9D%E5%A4%A9">第十九天</h1>
<h2 id="1-%E8%B7%AF%E7%94%B1">1 路由</h2>
<ul>
<li>在React中渲染组件的方式有两种：一种是组件嵌套 一种是路由渲染</li>
</ul>
<h3 id="11-%E8%B7%AF%E7%94%B1%E4%B9%9F%E6%98%AFreact%E7%9A%84%E4%B8%80%E4%B8%AA%E6%A0%B8%E5%BF%83%E6%8F%92%E4%BB%B6">1.1 路由也是React的一个核心插件</h3>
<pre class="hljs"><code><div>    npm install(i) react-router-dom

    react-router-dom@5.2.0
</div></code></pre>
<h3 id="12-%E8%AE%BE%E7%BD%AE%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F">1.2 设置路由模式</h3>
<ul>
<li>index.js 主的js文件中</li>
</ul>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> {HashRouter}  <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>
    <span class="hljs-comment">// BrowserRouter 属于 浏览器路由模式 history模式</span>
    <span class="hljs-comment">// HashRouter  属于 哈希模式</span>
    ReactDOM.render(
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">HashRouter</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">React.StrictMode</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">App</span> /&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">React.StrictMode</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">HashRouter</span>&gt;</span></span>
    ,
    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>)
    );
</div></code></pre>
<h3 id="13-%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1%E7%9A%84%E6%90%AD%E5%BB%BA">1.3 基本路由的搭建</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">//引入路由的相关组件</span>
    <span class="hljs-keyword">import</span> {Switch,Route} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>

    <span class="hljs-comment">//引入创建好的组件</span>
    <span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/home'</span>
    <span class="hljs-keyword">import</span> Sort <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/sort'</span>
    <span class="hljs-keyword">import</span> Cart <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/cart'</span>

    {<span class="hljs-comment">/* 路由出口（一级路由出口） */</span>}
    &lt;Switch&gt;
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/home'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Home}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span></span>
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/sort'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Sort}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span></span>
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/cart'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Cart}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span></span>
    &lt;<span class="hljs-regexp">/Switch&gt;
</span></div></code></pre>
<h3 id="14-%E8%B7%AF%E7%94%B1%E9%87%8D%E5%AE%9A%E5%90%91">1.4 路由重定向</h3>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> {Redirect} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>

    &lt;Switch&gt;
       {<span class="hljs-comment">/* 路由重定向 */</span>}
       &lt;Redirect to=<span class="hljs-string">'/home'</span>&gt;&lt;<span class="hljs-regexp">/Redirect&gt;
    &lt;/</span>Switch&gt;
</div></code></pre>
<h3 id="15-%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA">1.5 路由导航</h3>
<blockquote>
<p>Link</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> {Link} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>
    {<span class="hljs-comment">/* 路由的导航 */</span>}
    &lt;Link to=<span class="hljs-string">'/home'</span>&gt;首页&lt;<span class="hljs-regexp">/Link&gt;
    &lt;Link to='/</span>sort<span class="hljs-string">'&gt;分类&lt;/Link&gt;
    &lt;Link to='</span>/cart<span class="hljs-string">'&gt;购物车&lt;/Link&gt;
</span></div></code></pre>
<blockquote>
<p>NavLink</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> {NavLink} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>
    &lt;NavLink to=<span class="hljs-string">'/home'</span> activeClassName=<span class="hljs-string">'select'</span>&gt;首页&lt;<span class="hljs-regexp">/NavLink&gt;
    &lt;NavLink to='/</span>sort<span class="hljs-string">' activeClassName='</span>select<span class="hljs-string">'&gt;分类&lt;/NavLink&gt;
    &lt;NavLink to='</span>/cart<span class="hljs-string">' activeClassName='</span>select<span class="hljs-string">'&gt;购物车&lt;/NavLink&gt;
</span></div></code></pre>
<h3 id="16-%E8%B7%AF%E7%94%B1%E5%B5%8C%E5%A5%97">1.6 路由嵌套</h3>
<blockquote>
<p>app.js</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-keyword">import</span> <span class="hljs-string">'./App.css'</span>;
    <span class="hljs-keyword">import</span> {Switch,Route,Redirect} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>
    <span class="hljs-comment">//引入一级路由组件</span>
    <span class="hljs-keyword">import</span> Index <span class="hljs-keyword">from</span> <span class="hljs-string">'./pages'</span>
    <span class="hljs-keyword">import</span> List <span class="hljs-keyword">from</span> <span class="hljs-string">'./pages/list'</span>
    <span class="hljs-keyword">import</span> Play <span class="hljs-keyword">from</span> <span class="hljs-string">'./pages/play'</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> (
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"App"</span>&gt;</span>
        {/* 主组件中不能写任何内容除了一级路由出口 */}
        <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/index'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Index}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/list'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{List}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/play'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Play}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span>
            {/* 路由重定向 */}
            <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/index'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Redirect</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
    );
    }

    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;
</div></code></pre>
<blockquote>
<p>index.jsx</p>
</blockquote>
<pre class="hljs"><code><div>   <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>
   <span class="hljs-comment">//引入路由的插件</span>
   <span class="hljs-keyword">import</span> {Switch,Route,Redirect,NavLink} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>
   <span class="hljs-comment">//引入要渲染的二级路由组件</span>
   <span class="hljs-keyword">import</span> Recommend <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/recommend'</span>
   <span class="hljs-keyword">import</span> HotRank <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/hotRank'</span>
   <span class="hljs-keyword">import</span> Search <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/search'</span>
   <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Index</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
   render(){
           <span class="hljs-keyword">return</span> (
               <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                   {/* 二级路由导航 */}
                   <span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/index/rec'</span>&gt;</span>推荐音乐<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span>
                   <span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/index/hotRank'</span>&gt;</span>热歌榜<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span>
                   <span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/index/search'</span>&gt;</span>搜索<span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span>
                   {/* 二级路由出口 */}
                   <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span>
                       <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/index/rec'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Recommend}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span>
                       <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/index/hotRank'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{HotRank}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span>
                       <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">'/index/search'</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Search}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span>
                       <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'/index/rec'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Redirect</span>&gt;</span>
                   <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span>
               <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>)
       }
   }
   <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Index
</div></code></pre>
<h3 id="17-%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC">1.7 动态路由跳转</h3>
<blockquote>
<p>一级路由出口  app.js</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;Route path=<span class="hljs-string">'/list/:id'</span> component={List}&gt;&lt;<span class="hljs-regexp">/Route&gt;
</span></div></code></pre>
<blockquote>
<p>路由导航跳转</p>
</blockquote>
<pre class="hljs"><code><div>    {<span class="hljs-comment">/* 通过路由导航进行跳转 */</span>}
    {recList.map(<span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span> {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span> <span class="hljs-attr">to</span>=<span class="hljs-string">{</span>'/<span class="hljs-attr">list</span>/'+<span class="hljs-attr">item.id</span>}&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">li</span> &gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{item.img}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{item.title}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span></span>
        );
    })} 
</div></code></pre>
<blockquote>
<p>编程式导航跳转</p>
</blockquote>
<pre class="hljs"><code><div>    {<span class="hljs-comment">/* 编程式导航跳转 */</span>}
    {recList.map(<span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span> {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.goList.bind(this,item.id)}</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{item.img}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{item.title}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span>
        );
    })}
          
  <span class="hljs-comment">//跳转到列表页事件</span>
  goList(id){
      <span class="hljs-comment">//路由嵌套。含有路由配置对象</span>
      <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.props,<span class="hljs-string">'实现跳转'</span>);
      <span class="hljs-comment">//编程式导航 push() 在历史记录中添加一条数据</span>
      <span class="hljs-comment">//replace 替换当前这条数据</span>
      <span class="hljs-comment">//go(n)  n是整数</span>
      <span class="hljs-comment">//goBack()  函数方法</span>
       <span class="hljs-keyword">this</span>.props.history.push(<span class="hljs-string">'/list/'</span>+id)
    <span class="hljs-comment">//this.props.history.replace('/list/'+id)</span>
  }
</div></code></pre>
<blockquote>
<p>取值</p>
</blockquote>
<pre class="hljs"><code><div>    this.props.match.params.动态路由参数
</div></code></pre>
<blockquote>
<p>路由返回事件</p>
</blockquote>
<pre class="hljs"><code><div>    &lt;div&gt;
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.props.history.go(-1)}&gt;返回go<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span>
    &lt;<span class="hljs-regexp">/div&gt;
    &lt;div&gt;
        &lt;button onClick={()=&gt;this.props.history.goBack()}&gt;返回 goBack()&lt;/</span>button&gt;
    &lt;<span class="hljs-regexp">/div&gt;
</span></div></code></pre>
<h3 id="18-%E9%80%9A%E8%BF%87query%E8%BF%9B%E8%A1%8C%E8%B7%B3%E8%BD%AC">1.8 通过query进行跳转</h3>
<blockquote>
<p>路由导航跳转</p>
</blockquote>
<pre class="hljs"><code><div>    {<span class="hljs-comment">/* 通过路由导航进行跳转 */</span>}
    {recList.map(<span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span> {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span> <span class="hljs-attr">to</span>=<span class="hljs-string">{</span>'/<span class="hljs-attr">play</span>?<span class="hljs-attr">id</span>=<span class="hljs-string">'+item.id+'</span>&amp;<span class="hljs-attr">name</span>=<span class="hljs-string">'+item.songname}&gt;&lt;li &gt;
                &lt;img src={item.img} alt="" /&gt;
                &lt;p&gt;{item.title}&lt;/p&gt;
            &lt;/li&gt;&lt;/NavLink&gt;</span></span></span>
        );
    })} 
</div></code></pre>
<blockquote>
<p>编程式导航跳转</p>
</blockquote>
<pre class="hljs"><code><div>    {<span class="hljs-comment">/* 编程式导航跳转 */</span>}
    {hotList.map(<span class="hljs-function">(<span class="hljs-params">item, idx</span>) =&gt;</span> {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.goPlay.bind(this,item.id)}</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span>&gt;</span>
            {idx + 1}、{item.songname}
            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span>
        );
    })}
          
          
  <span class="hljs-comment">//封装一个跳转播放详情页事件</span>
  goPlay(id){
      <span class="hljs-keyword">this</span>.props.history.push(<span class="hljs-string">'/play?id='</span>+id)
  }
</div></code></pre>
<blockquote>
<p>取值</p>
</blockquote>
<pre class="hljs"><code><div>    <span class="hljs-comment">//querystring 模块提供用于解析和格式化 URL 查询字符串的实用工具</span>
    <span class="hljs-comment">//原生node API方法</span>
    <span class="hljs-keyword">import</span> qsString <span class="hljs-keyword">from</span> <span class="hljs-string">'querystring'</span>
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Play</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">super</span>();
        <span class="hljs-keyword">this</span>.state = {
        <span class="hljs-attr">query</span>: <span class="hljs-string">""</span>,
        };
    }
    componentDidMount() {
        <span class="hljs-comment">//针对携带的query 进行转化 我们需要query参数 = {id：4}</span>
        <span class="hljs-comment">/* 
        如何把这个search: "?id=3&amp;name=万拒" 
        转化成 {
            id:3,
            name:万拒
        }
        */</span>
        <span class="hljs-comment">//原生js的方式</span>
        <span class="hljs-comment">//字符串截取,去掉问号 街取出id=3&amp;name=万拒</span>
        <span class="hljs-keyword">let</span> query = <span class="hljs-keyword">this</span>.props.location.search.slice(<span class="hljs-number">1</span>);
    <span class="hljs-comment">/*    //把字符串转化成为数组  ["id=3", "name=%E4%B8%87%E6%8B%92"]
        let arr = query.split("&amp;");
        //设定一个空对象
        let obj = {};
        //针对于你转化的新数组，进行循环遍历，按照等号去拆
        arr.forEach((item) =&gt; {
        let arrTemp = item.split("="); // ["id", "3"] ["name", "%E4%B8%87%E6%8B%92"]
        obj[arrTemp[0]] = arrTemp[1];
        });
        console.log(obj, "属性"); */</span>
        <span class="hljs-comment">//利用nodeAPI方法</span>
        <span class="hljs-keyword">let</span> obj = qsString.parse(query)
        <span class="hljs-built_in">console</span>.log(obj, <span class="hljs-string">"属性"</span>)
        <span class="hljs-comment">//给query赋值</span>
        <span class="hljs-keyword">this</span>.setState({
        <span class="hljs-attr">query</span>: obj,
        });
    }
    }
</div></code></pre>
<h3 id="19-%E9%80%9A%E8%BF%87state%E8%BF%9B%E8%A1%8C%E8%B7%B3%E8%BD%AC">1.9 通过State进行跳转</h3>
<blockquote>
<p>路由导航跳转</p>
</blockquote>
<pre class="hljs"><code><div>    {hotList.map(<span class="hljs-function">(<span class="hljs-params">item, idx</span>) =&gt;</span> {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">{</span>
                {
                    <span class="hljs-attr">pathname:</span>'/<span class="hljs-attr">play</span>',
                    <span class="hljs-attr">state:</span>{
                        <span class="hljs-attr">id:item.id</span>
                    }
                }
            } <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
                    {idx + 1}、{item.songname}
                <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span></span>
            
        );
    })}
</div></code></pre>
<blockquote>
<p>编程式导航跳转</p>
</blockquote>
<pre class="hljs"><code><div>    {hotList.map(<span class="hljs-function">(<span class="hljs-params">item, idx</span>) =&gt;</span> {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.goPlay.bind(this,item.id)}</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{item.id}</span>&gt;</span>
            {idx + 1}、{item.songname}
            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span>
        );
    })} 
          
          
    <span class="hljs-comment">//封装一个跳转播放详情页事件</span>
  goPlay(id){
      <span class="hljs-comment">//通过state方式进行传值</span>
      <span class="hljs-keyword">this</span>.props.history.push({
          <span class="hljs-attr">pathname</span>:<span class="hljs-string">'/play'</span>,
          <span class="hljs-attr">state</span>:{
              id
          }
      })
  }
</div></code></pre>
<blockquote>
<p>取值</p>
</blockquote>
<pre class="hljs"><code><div>  &lt;h1&gt;接收state属性值----{this.props.location.state.id}&lt;/h1&gt;
</div></code></pre>
<h3 id="110-withrouter%E7%9A%84%E7%94%A8%E6%B3%95">1.10 withRouter的用法</h3>
<pre class="hljs"><code><div>    <span class="hljs-comment">/* 
    对于普通嵌套组件，它没有路由的配置对象，如何解决
    我们可以调用，路由的高阶函数
    高阶函数：函数(组件)  通过调用函数return一个新组件
    */</span>
    <span class="hljs-comment">// 引入配置路由对象的方法</span>
    <span class="hljs-keyword">import</span> {withRouter} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> withRouter(Home);
</div></code></pre>

</body>
</html>
